Clear input

[Zzombiee2361]

Is your feature request related to a problem? Please describe. Allow to easily clear input on click of a clear button

Describe the solution you'd like Add a clearable prop to show the clear button

[lecoueyl]

Hi @Zzombiee2361 , thanks for your suggestion.

Can you bring a use case and which component this should be implemented on?

[Zzombiee2361]

I usually use clearable components for search and filtering. When I'm done searching or changing filter, I can just clear it. I think adding clearable to input, select, and file upload components would make sense. Now that I mention it, does mijin even have a file component?

[lecoueyl]

@Zzombiee2361 Do you have any example of the implementation?

It can easily be handled by reseting the v-model or the value of the component. Or you wish there is a reset() method that clear the value within the component?

Regarding the file upload, the basic input file can be use like this:

<MjInput type="file" />

[Zzombiee2361]

Vuetify has this clear icon on the right side of the input, select and file input has that too. You don't have to make the clear icon configurable. There's no need to expose a reset method to be called, you can just easily set the value. This is for the convenience of user.

As for to what value it resets to, well you can either use empty string or null. I personally prefer empty string, since it would be the same value as deleting the value manually by the user.

Also please add an event when user is explicitly click the clear button, might be useful for someone