Clear value overrides vuetify chipProps

[Lars-Sommer]

I don´t know if this is working as intented, but I would like to hide the clear button (the 'x' icon to clear the chosen value) in the chip, and instead use my own icon. I define the component like this:

<cron-vuetify
    v-model="localCron"         
    :chipProps="{ rounded: 'lg', appendIcon: 'fa fa-caret-down v-icon' }"
/>

This initially shows the icon as expected. But when I choose a value the clear icon overrides my appendIcon property and shows the clear icon instead. I do not see an option for not showing the clear icon, as this might would be the solution to my problem.

[abichinger]

Have you tried setting the closable property to false

[Lars-Sommer]

You mean in the chipProps like this?:

<cron-vuetify
    v-model="localCron"         
    :chipProps="{ rounded: 'lg', appendIcon: 'fa fa-caret-down v-icon', closable: false }"
/>

This does not work either. I can see that the "<i class="fa fa-caret-down v-icon..." is removed from the DOM and replaced with the close icon when a value is selected.

[abichinger]

But when I choose a value the clear icon overrides my appendIcon property

This happens because the vuetify component uses the append slot to show the close icon. I could use the close slot instead, but then both icons would be visible when you select a value.

If I understood you correctly you never want to show the close icon. Correct?

[Lars-Sommer]

If I understood you correctly you never want to show the close icon. Correct? <

Correct. But I do understand if this is too much of an edgecase 😅

[abichinger]

Yeah, this seems to be too much of an edgecase. You could use @vue-js-cron/core, copy the Vuetify component into your src directory, and then apply the required changes to make it work.

Example: https://codesandbox.io/p/sandbox/vue-js-cron-light-65-forked-vxcw8g?workspaceId=57ec16e4-4cf0-436c-82f3-18f93e1fbc40