bug: ion-item-sliding - sliding will not work in Svelte (and possibly others without VDOM)

[Tommertom]

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

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

Sliding the options in ion-item-sliding will not work in Svelte(Kit) framework and possibly others that do not use VDOM (assumption)

The part in the Stencil code that seeks ion-item through queryselector is triggered in the connectedCallback hook of the webcomponent. This seems to be too early to detect any ion-item that is (to be) rendered as a child. Because of this, this.item is always null which basically renders the sliding feature useless. Also open/close methods won't work.

After some conversation with an Ionic member on Discord - the suggestion is to have the logic in connectedCallback moved to the lifecycle hook componentDidLoad.

https://discordapp.com/channels/520266681499779082/1051562091393335316/1051613247989612725

Expected Behavior

Ion Item Sliding to slide whenever it is used by the user and/or programmatically

Steps to Reproduce

Spin a svelte ionic project

npm create ionic-svelte-app@latest

replace +page.svelte with:

<script lang="ts">
	import { onMount } from 'svelte';

	let itemSlidingStart: HTMLIonItemSlidingElement;
	const dragEvent = async (event) => {
		console.log('EVEs', event);
		//	debugger;
		const stuff = await itemSlidingStart.getOpenAmount();

		console.log('EVE', event, stuff);

		// itemSlidingStart.open('start').then((x) => {
		// 	console.log('SSS', x);
		// });

		// console.log('FIND THE ELEMENT IN SVELTE CODE', itemSlidingStart.querySelector('ion-item'));
	};

	onMount(() => {
		console.log('adsadsa', itemSlidingStart);
	});
</script>

<ion-item-sliding on:ionDrag={dragEvent} on:click={dragEvent} bind:this={itemSlidingStart}>
	<ion-item-options side="start">
		<ion-item-option color="primary">Mark Unread</ion-item-option>
	</ion-item-options>

	<ion-item-options side="end">
		<ion-item-option color="danger">Delete</ion-item-option>
	</ion-item-options>

	<ion-item class="blue-item"> ssss </ion-item>
</ion-item-sliding>

Code Reproduction URL

https://github.com/sean-perkins/ionic-svelte-item-sliding

Ionic Info

Ionic core version 6.x

Additional Information

No response

[sean-perkins]

Added a Github repository for the reproduction.

You will observe the ion-item-sliding behavior does not function. Installing the dev-build: @ionic/core@6.4.1-dev.11670794472.10eac757 will cause the ion-item-sliding to function.

The dev-build changes the behavior of ion-item-sliding from querying elements in connectedCallback to componentDidLoad.

[sean-perkins]

Discussed with the team and adding to our backlog.

We've ran into issues in the past with moving some implementations from connectedCallback → componentDidLoad, so we need to investigate if this implementation can be detached and reattached from the DOM.

One thought on how we may handle this, if that ends up being a problem, is something like:

private didLoad = false;

connectedCallback() {
  if (this.didLoad) {
    // component is re-attached in the DOM
    this.doSomething();
  }
}

disconnectedCallback() {
  // teardown of things in the doSomething() fn
}

componentDidLoad() {
  this.didLoad = true;
  // Run this on first render
  this.doSomething();
}

private doSomething() {
  // impl
  // gesture set-up, etc.
}

[Tommertom]

if we would just do the this.item=queryselector... only in the componentDidload - and leave the other init stuff (that does not rely on this) in connectedCallBack - maybe that solves the problem with sideeffects? I reckon the childs won't change in between?