Use ion-input clear function

[dt2patel]

Why not use default ion-input clear function? is it because we need to set the value to 0?

inventory-count/src/views/CountDetail.vue

Lines 118 to 120 in 37a0e2e

	<ion-input :label="translate('Count')" :disabled="productStoreSettings['forceScan']" :placeholder="translate('submit physical count')" name="value" v-model="inputCount" id="value" type="number" min="0" required @ionInput="hasUnsavedChanges=true" @keydown="inputCountValidation"/>
	<ion-button slot="end" fill="clear" size="default" class="ion-no-padding" @click="inputCount = 0">
	<ion-icon :icon="closeOutline" stot="icon-only" />

[priyanshee1604]

The default clear functionality of ion-input simply clears the field, leaving it blank. However, in this case, the desired behavior is to reset inputCount to 0 rather than leaving it empty. Therefore, the default ion-input clear function was not used.

[dt2patel]

Is it possible to alter the function of the default clear button instead? That way the UI would be cleaner

[priyanshee1604]

It is possible to override the default behavior of the ion-input clear button, but it requires additional handling, as detailed below:

1. Value checks need to be applied for the ionInput event, as no dedicated event is triggered when the clear function of ion-input is used.
2. Vue's nextTick functionality is necessary to handle the edge case where the user clicks the clear button twice in quick succession after the value has been changed to 0.
3. Despite these measures, the input remains stuck with the value "0," preventing further input.
4. Due to the nextTick functionality, the "0" persists, and the user will have to manually append the count after 0, such as "012," "037," and so on.