bug: conditional appearance of the content of an ion-item prevent click on right and left edge of the ion-item (with checkbox)

[JulienLecoq]

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

v8.x

Current Behavior

When putting a ion-checkbox inside of an ion-item, the click on the right and left edge of the ion-item only works at the beginning. Once I hide and show again the checkbox, the click on the right and left edge of the ion-item does not work anymore.

ion-item_click_bug.mov

Expected Behavior

The ion-item should be clickable after hiding/showing the checkbox.

Steps to Reproduce

1. Paste the following code in a page:

  <ion-item>
    @if (showCheckbox()) {
      <ion-checkbox (ionChange)="stateChange()">Test checkbox</ion-checkbox>
    } @else {
    <ion-label>
      Test checkbox
    </ion-label>

    <ion-spinner
      slot="end"
      name="lines"
      class="item-spinner">
    </ion-spinner>
    }
  </ion-item>

  <ion-button (click)="toggleDisplay()">Toggle</ion-button>

  showCheckbox = signal(true)

  stateChange() {
    console.log('Checkbox state changed.')
  }

  toggleDisplay() {
    this.showCheckbox.set(!this.showCheckbox())
  }

2. Try to click on the left or right edge of the ion-item after toggling the display of the checkbox once.
3. The click should not work after toggling the display.

Code Reproduction URL

https://github.com/JulienLecoq/ion-item_click_bug_after_toggling_display/tree/main

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/julien_lecoq/.nvm/versions/node/v20.14.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.2.6
@angular-devkit/build-angular : 18.1.4
@angular-devkit/schematics : 18.1.4
@angular/cli : 18.1.4
@ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.1.2
@capacitor/android : not installed
@capacitor/core : 6.1.2
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v20.14.0 (/Users/julien_lecoq/.nvm/versions/node/v20.14.0/bin/node)
npm : 10.7.0
OS : macOS Unknown

Additional Information

No response

[dev-charles15531]

Bind your checkbox to a state which holds if its checked or unchecked, and it should work just as expected.

I don't believe this to be a problem with ionic

[JulienLecoq]

It does not change anything, the problem still occurs.

[dev-charles15531]

Please can you try reproducing your code on stackblitz and dropping a link here?

It's easier when people want to help

[JulienLecoq]

Well, there is the GitHub link as requested by the form to create the issue.

[sean-perkins]

Hello @JulienLecoq thanks for reporting this issue, I am able to reproduce.

The problem is caused by the ion-item not triggering a re-render when using the control flow syntax to dynamically render the spinner or checkbox as slotted contents.

• On initial render the item detects an interactive element (checkbox)
• Clicking toggle flips the state and the item re-renders, it is now not able to detect an interactive element (this is correct)
• Click toggle flips the state, but the item's render function is not called this time.

Related implementation code:

ionic-framework/core/src/components/item/item.tsx

Lines 276 to 310 in 9c4ba2e

	const firstInteractive = this.getFirstInteractive();
	// Only set onClick if the item is clickable to prevent screen
	// readers from reading all items as clickable
	if (clickable || (firstInteractive !== undefined && !multipleInputs)) {
	clickFn = {
	onClick: (ev: MouseEvent) => {
	if (clickable) {
	openURL(href, ev, routerDirection, routerAnimation);
	}
	if (firstInteractive !== undefined && !multipleInputs) {
	const path = ev.composedPath();
	const target = path[0] as HTMLElement;
	if (ev.isTrusted) {
	/**
	* Dispatches a click event to the first interactive element,
	* when it is the result of a user clicking on the item.
	*
	* We check if the click target is in the shadow root,
	* which means the user clicked on the .item-native or
	* .item-inner padding.
	*/
	const clickedWithinShadowRoot = this.el.shadowRoot!.contains(target);
	if (clickedWithinShadowRoot) {
	/**
	* For input/textarea clicking the padding should focus the
	* text field (thus making it editable). For everything else,
	* we want to click the control so it activates.
	*/
	if (firstInteractive.tagName === 'ION-INPUT' || firstInteractive.tagName === 'ION-TEXTAREA') {
	(firstInteractive as HTMLIonInputElement | HTMLIonTextareaElement).setFocus();
	} else {
	firstInteractive.click();
	}
	}

As a workaround I would recommend using the control flow syntax to render the entire item conditionally. This will guarantee it is rendered in the correct state:

@if (showCheckbox()) {
<ion-item>
  <ion-checkbox (ionChange)="stateChange()">Test checkbox</ion-checkbox>
</ion-item>
} @else {
<ion-item>
  <ion-label> Test checkbox </ion-label>

  <ion-spinner slot="end" name="lines" class="item-spinner"> </ion-spinner>
</ion-item>
}

[dev-charles15531]

@sean-perkins
I am not able to reproduce same problem with vue, so is the problem from the core item component or from the angular package?

[sean-perkins]

@dev-charles15531 the problematic behavior is likely caused by Angular's control flow syntax, but the fix can be applied in core to account for it consistently.

I suspect that the control flow syntax rendering will cause a slotchange event to fire on the default slot. We can then use that event to trigger a re-render of the item if the number of interactive elements changes from 0 → 1+ or 1+ → 0.