The deletion function is realized using ion-item-sliding and ion-item-option as shown below. Swipe through the item list to reveal a delete button and click to delete the item. However, by default, the ion-item-sliding of the item under the deleted item is opened when executing the delete, so the ion-item-sliding is closed with slidingRef.value.$el.closeSlidingItems();
.
This is a strange behavior and not smooth.
How do I prevent opening the below item’s ion-item-sliding when performing a delete?
List.vue
<ion-list can-swipe="true" show-reorder="reorder" class="ion-no-padding" ref="slidingRef">
<ion-item-sliding v-for="(d, index) in devices" :key="index" :disabled="!settingsStore.settings.customize || reorder" >
<ion-item :detail="false" lines="full" @click="setRemoteDevice(d.id)" data-testid="device-item">
<img
class="device-icon"
:src="require(`@/img/device/${d.icon}.png`)"
:alt="d.icon"
/>
<ion-label class="text-ellipsis ion-padding-start">{{
d.name
}}</ion-label>
</ion-item>
<ion-item-options>
<ion-item-option
class="flex-center"
color="danger"
@click="removeDevice(index, settingsStore.settings)"
>Delete</ion-item-option
>
</ion-item-options>
</ion-item-sliding>
</ion-list>
list.ts
const removeDevice = async (n: number, storeSettings: StoreSettings) => {
slidingRef.value.$el.closeSlidingItems();
const removedDevices = await storeSettings.devices.splice(n, 1);
await _.each(removedDevices, (removedDevice) => {
_.each(devices.value, (d) => {
if (d.groups) {
if(removedDevice.id){
delete d.groups[removedDevice.id];
}
}
});
emptyDevice(removedDevice);
});
settingsSave(storeSettings);
};