Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug: ion-item-sliding update error #29499

Open
3 tasks done
Danak-UY opened this issue May 13, 2024 · 0 comments
Open
3 tasks done

bug: ion-item-sliding update error #29499

Danak-UY opened this issue May 13, 2024 · 0 comments
Assignees
@brandyscarney
Labels
triage

Comments

@Danak-UY
Copy link

Danak-UY commented May 13, 2024 •
edited by brandyscarney

Prerequisites

Ionic Framework Version

v7.x, v8.x

Current Behavior

I am using the bundled version of ionic
After I render a ion-item-sliding with ion-item-options two or more times I get an error like the following

p-b51e4004.js:4 Uncaught (in promise) Error: "undefined" is not a valid value for [side]. Use "start" or "end" instead.
    at b (p-b51e4004.js:4:3050)
    at b.updateOptions (p-c7e0b81a.entry.js:4:14724)
    at b.connectedCallback (p-c7e0b81a.entry.js:4:13108)
    at Fs (p-4af0b730.js:7:239613)
    at js (p-4af0b730.js:7:241171)
    at p-4af0b730.js:7:242350
    at Vs (p-4af0b730.js:7:242665)
    at p-4af0b730.js:7:247293
    at Object.jmp (p-4af0b730.js:8:170)
    at c.connectedCallback (p-4af0b730.js:7:247284)

This happens even if I add a valid side prop to the element
Tried the same code with v6.6.0 and it works fine

Expected Behavior

Update or add item without error

Steps to Reproduce

Test code

  • Click plus icon multiple times
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test Ionic Item Sliding</title>

    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@ionic/core@8.0.1/dist/ionic/ionic.esm.js"
    ></script>
    <script
      nomodule
      src="https://cdn.jsdelivr.net/npm/@ionic/core@8.0.1/dist/ionic/ionic.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@ionic/core@8.0.1/css/ionic.bundle.css"
    />
  </head>
  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Test Ionic Item Sliding</ion-title>
          <ion-buttons slot="end">
            <ion-button id="add-item">
              <ion-icon name="add" slot="icon-only"></ion-icon>
            </ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>

      <ion-content>
        <ion-list> </ion-list>
      </ion-content>
    </ion-app>

    <script>
      const itemList = [];
      const $list = document.querySelector("ion-list");
      document.querySelector("#add-item").addEventListener("click", writeItems);

      function generateItem() {
        const currentItem = itemList.length + 1;
        const item = `
            <ion-item-sliding id="item-${currentItem}">
                <ion-item>
                <ion-label>Sliding Item ${currentItem}</ion-label>
                </ion-item>

                <ion-item-options side="end">
                <ion-item-option color="danger" id="delete-item-${currentItem}">Delete</ion-item-option>
                </ion-item-options>
            </ion-item-sliding>
        `;

        itemList.push(item);

        return item;
      }

      function writeItems() {
        $list.innerHTML += generateItem();

        const currentItem = itemList.length;
        const deleteId = `#delete-item-${currentItem}`;
        const itemId = `#item-${currentItem}`;

        document.querySelector(deleteId).addEventListener("click", (ev) => {
          document.querySelector(itemId).remove();
        });
      }
    </script>
  </body>
</html>

Code Reproduction URL

https://stackblitz.com/edit/stackblitz-starters-mezoy6?file=index.html

Ionic Info

No have

Additional Information

No response
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@brandyscarney brandyscarney

Labels
triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@brandyscarney @Danak-UY