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
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
This happens even if I add a valid
sideprop to the elementTried the same code with v6.6.0 and it works fine
Expected Behavior
Update or add item without error
Steps to Reproduce
Test code
Code Reproduction URL
https://stackblitz.com/edit/stackblitz-starters-mezoy6?file=index.html
Ionic Info
No have
Additional Information
No response