Open
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
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