Hello everyone! I have this issue with buttons in start and end slots of ion-input triggering @ion-focus event. I know this is probably expected behaviour since the user is technically clicking inside the ion-input but how to separate these events, lemme explain the issue…
It’s an ion-item for an ingredient with some sliding options. Inside there is an ion-input where you can either rewrite values or click MINUS and PLUS buttons to add/subtract amounts (the buttons are in the start and end slots of ion-input).
Now the problem is that I have an @ion-focus on ion-input that is supposed to selectAll the input value (basically to highlight it so when user clicks it they can rewrite it immediatelly). It works just fine, but I need it to NOT trigger when people are clicking the buttons on the start/end slots of the ion-input… the MINUS and PLUS. I need the input.select() to happen only when someone clicks the value of the input. Here is the visual and my code.
Visual:
<ion-item-sliding v-for="item in getIngredients(segment)" :key="item.guid">
<ion-item class="swipe-indicator" lines="full" :deducted="deducted.includes(item.guid)">
<ion-label slot="start">
{{ item.name }}
</ion-label>
<ion-input
:ref="`inputRef${item.guid}`"
slot="end"
:value="newAmounts[item.guid]"
type="number"
:model-value="getAmount(item)"
aria-label="Amount"
inputmode="decimal"
error-text="Max 1 desetinné místo"
debounce="700"
shape="round"
@ion-input="validate($event, item)"
@ion-focus="selectInput($event)"
>
<ion-button
slot="start"
fill="clear"
aria-hidden="odecist-deset"
@click="addSubtract(item, false)"
>
<ion-icon slot="icon-only" color="primary" src="/assets/icons/minus.svg"></ion-icon>
</ion-button>
<ion-button
slot="end"
aria-hidden="pricist-deset"
fill="clear"
@click="addSubtract(item, true)"
>
<ion-icon slot="icon-only" color="primary" src="/assets/icons/plus.svg"></ion-icon>
</ion-button>
</ion-input>
</ion-item>
<ion-item-options side="end" @ion-swipe="handleDeducted(item)">
<ion-item-option color="primary" class="px-1" @click="restoreValue(item)">
<ion-icon slot="top" color="white" src="/assets/icons/restore.svg"></ion-icon>
<ion-text class="font-13">Původní</ion-text>
</ion-item-option>
<ion-item-option expandable color="danger" class="px-1" @click="handleDeducted(item)">
<ion-icon slot="top" color="white" src="/assets/icons/power.svg"></ion-icon>
<ion-text class="font-13">Vypnout</ion-text>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
// these are the methods related to the issue
addSubtract(item, add) {
const startingAmount = this.getAmount(item)
this.newAmounts[item.guid] = startingAmount + (add ? 10 : -10)
},
selectInput(event) {
if (event.detail) event.detail.target.select()
},
Can I somehow fix it? tried to stop propagation but it didn’t work. I was thinking about just putting the buttons outside (the slots are experimental documentation says) but I like the styling of it like this.
Thank you