Ion-input tab navigation clear input

starting point: ion-input element with the property clear-input.

How can the tab key be used to jump to the next element?
The clear button should not receive the focus!

I tried the following but it doesn’t work:
onMounted(() => {
document.querySelectorAll(“button.input-clear-icon”).forEach(el=> el.setAttribute(“tabindex”, “-1”));

Link IonicDocs

getInputElement() => Promise

Or can someone show me how to use the getInputElement() method?

I tried the following but it doesn’t work:

ion-input :clear-input=“true” ref=“inputRef”

const inputRef = ref(null);
inputRef.value.getInputElement().then(input => console.log(input));


First, why do you want to skip it? It’s there for accessibility.

Second, get your ref element with inputRef.value?.$el

It should be possible to jump to the next element with only one keyboard entry.