bug: ios, delegatesFocus always focuses first focusable element

Feature Request

Ionic version:

[x] 5.5.5

Describe the Feature Request Right now, if I add an ion-input inside an ion-item, it takes over the click function of the ion-item. If we add button=false on an ion-item, the expected result is that items placed within, such as a ion-input, will not make the ion-item work like a button.

Describe Preferred Solution It should be possible to deactivate the clickListener of the ion-item in some cases. To be more precise this if should be modified with a new property or using the button attribute: https://github.com/ionic-team/ionic-framework/blob/943e3f6ae37ecc56f21168f057dde77a05e4e144/core/src/components/item/item.tsx#L161.

Describe Alternatives There is currently no other way to implement this behavior. On Android devices, it helps to call stopPropagation and preventDefault in the child-element that was clicked. But on iOS the click event of the ion-item is called anyway so in the following example the button event is triggered, but the ion-input is focused which is quite bad behavior.

Related Code

The following code solves the issue on Android devices (and Chrome browsers) but not works for iOS (and the Safari browser)

<ion-item>
  <ion-label slot="start"> {{ labelText }}</ion-label>
  <ion-input
    type="number"
    [(ngModel)]="amount"
    [placeholder]="placeholder"
  ></ion-input>
  <ion-button
    (click)="minusAmount($event)"
  >
    <ion-icon slot="icon-only" name="remove-circle-outline"></ion-icon>
  </ion-button>
  <ion-button (click)="plusAmount($event)">
    <ion-icon slot="icon-only" name="add-circle-outline"></ion-icon>
  </ion-button>
</ion-item>

  plusAmount($event: MouseEvent) {
    $event.stopPropagation();
    $event.preventDefault();
   ...
  }

  minusAmount($event: MouseEvent) {
    $event.stopPropagation();
    $event.preventDefault();
   ...
  }

Additional Context

https://github.com/ionic-team/ionic-framework/issues/19590 https://forum.ionicframework.com/t/clickable-button-inside-an-ion-item-whereas-the-ion-item-itself-is-also-clickable/79262/3

[NLueg]

I actually was able to solve this issue by providing a tabindex of 0 at the items which should not propagate the event to the item (and so to the input). So I adjusted the above code to this:

<ion-item>
  <ion-label slot="start"> {{ labelText }}</ion-label>
  <ion-input
    type="number"
    [(ngModel)]="amount"
    [placeholder]="placeholder"
  ></ion-input>
  <ion-button  tabindex="0"
    (click)="minusAmount($event)"
  >
    <ion-icon slot="icon-only" name="remove-circle-outline"></ion-icon>
  </ion-button>
  <ion-button tabindex="0" (click)="plusAmount($event)">
    <ion-icon slot="icon-only" name="add-circle-outline"></ion-icon>
  </ion-button>
</ion-item>

I actually can’t say why this works but it solves my issue perfectly.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.