fix(VField): Apply color if glow prop is true
Description
fixes #21388
applied color to the menuicon if glow is set to true
Markup:
<template>
<v-app>
<v-container>
<v-defaults-provider
:defaults="{ VAutocomplete: { iconColor: '#FF00FF' } }"
>
<v-autocomplete
label="Autocomplete"
:items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
variant="outlined"
color="blue"
glow
></v-autocomplete>
</v-defaults-provider>
</v-container>
<v-container>
<v-combobox
label="Combobox"
:items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
variant="outlined"
color="blue"
glow
></v-combobox>
</v-container>
<v-container>
<v-select
label="Select"
:items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
variant="outlined"
color="blue"
glow
></v-select>
</v-container>
</v-app>
</template>
I think this issue originates from the underlying VInput and VField components. by addressing the icon color logic there we can ensure a consistent fix across all affected components
I think this issue originates from the underlying
VInputandVFieldcomponents. by addressing the icon color logic there we can ensure a consistent fix across all affected components
But the icon we are talking about is part of these components not part of the VField 🤔
If you trace it down, the append-inner slot from VTextField goes to VField and you’ll see that the color prop gets passed down there
https://github.com/vuetifyjs/vuetify/blob/6f2f70f5adca53631ac99f425f8f40f714635c17/packages/vuetify/src/components/VField/VField.tsx#L380
If you trace it down, the
append-innerslot fromVTextFieldgoes toVFieldand you’ll see that the color prop gets passed down therehttps://github.com/vuetifyjs/vuetify/blob/6f2f70f5adca53631ac99f425f8f40f714635c17/packages/vuetify/src/components/VField/VField.tsx#L380
Thanks for pointing to the right direction