bug: tabindex adverse effect after adding clear-input="true"

[Lxstr]

Bug Report

Ionic version: As per latest on CDN

Current behavior: When you fill an input item that has clear input set to true and then press tab the focus does not move to the next element. (even when tab index is set on the inputs)

Expected behavior: Perhaps this is intended behaviour but I would expect the next input to be focused after you have finished writing in an input.

Tabbing to an element that already has text in it is working perfectly (please don't change this). It is just leaving the input that seem to require an additional un-needed tab.

Steps to reproduce: Any ion-items in a row with clear input.

Related code: https://codepen.io/Lxstr/pen/KKmNVZm

[liamdebeasi]

Thanks for the issue. What's happening here is when you tab to leave an input with clearInput="true", you are focusing the clear input button. I need to double check to see if this is the intended behavior.

[liamdebeasi]

Neither native inputs nor web inputs have the clear button receive focus via the Tab button, so I think that behavior should be made consistent in Ionic Framework.

edit: Further investigation shows that rather than just removing this behavior, we need to make it configurable: https://github.com/ionic-team/ionic-framework/issues/21549

One idea I have is to add a property to ion-input and ion-searchbar that lets developers configure whether or not users should be able to tab to the clear button. For consistency, this value should be false in v6.

[Lxstr]

Nice, makes sense to me.

[jacksloan]

@liamdebeasi Any activity on this issue?

It would be really great to have tabbing behavior configurable on the ion-input clear button. Tabbing directly to the next input value can be crucial for user experience on large forms (and would match the existing native web experience).