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 · 2 comments · May be fixed by #29845
Open
3 tasks done

bug: ion-item-sliding update error #29499

Danak-UY opened this issue May 13, 2024 · 2 comments · May be fixed by #29845
Labels
package: core @ionic/core package type: bug a confirmed bug report

Comments

@Danak-UY
Copy link

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

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/[email protected]/dist/ionic/ionic.esm.js"
    ></script>
    <script
      nomodule
      src="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/dist/ionic/ionic.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/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
@ionitron-bot ionitron-bot bot added the triage label May 13, 2024
@brandyscarney
Copy link
Member

Thank you for the issue! Could you try this dev build and see if it works for you: 8.2.5-dev.11719593518.12e08a58

@brandyscarney brandyscarney added the needs: investigation This issue is waiting on more investigation from the Ionic Team. label Jun 28, 2024
@ionitron-bot ionitron-bot bot removed the triage label Jun 28, 2024
@brandyscarney brandyscarney removed their assignment Jul 15, 2024
@agBeta
Copy link

agBeta commented Sep 6, 2024

I've also encountered the same error. I used the dev build and the error is gone. Thank you very much.

@brandyscarney brandyscarney added package: core @ionic/core package type: bug a confirmed bug report and removed needs: investigation This issue is waiting on more investigation from the Ionic Team. labels Sep 6, 2024
@brandyscarney brandyscarney linked a pull request Sep 6, 2024 that will close this issue
Draft
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
package: core @ionic/core package type: bug a confirmed bug report
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(item-sliding): check for side attribute to avoid an undefined value ionic-team/ionic-framework
3 participants
@brandyscarney @Danak-UY @agBeta