vuetify
vuetify copied to clipboard
[Bug Report][3.3.7] menuIcon={undefined} in VCombobox doesn't disable default arrow icon
Environment
Vuetify Version: 3.3.7 Vue Version: 3.3.2 Browsers: Chrome 114.0.0.0 OS: Windows 10
Steps to reproduce
- Open repro
Expected Behavior
Default $dropdown
icon is used
Actual Behavior
Since menuIcon
is set to undefined - no icon should be used
Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
I believe this is because Vue sees that menuIcon
is undefined and decides to use the default $dropdown
value for that prop.
One workaround is to use empty string like so: :menuIcon="''"
but that doesn't seem good to me...
Another workaround is to use null
, but that interferes with https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/no-null.md also Type 'null' is not assignable to type 'IconValue | undefined'.ts(2322)
Yeah vue treats undefined props as not being set at all. We can detect it but it's really gross
void props[prop]
vm.vnode.props?.hasOwnProperty(prop) || vm.vnode.props?.hasOwnProperty(toKebabCase(prop))
use empty string like so:
:menuIcon="''"
menuIcon=""
is simpler
that interferes with no-null
don't use no-null then lol
Type 'null' is not assignable to type 'IconValue | undefined
I think we have to add null to pretty much all the prop types, annoying vue doesn't do that already for props that can be undefined.
I see... I think the main reason I created this issue is that my first idea was to use undefined
, and then when it didn't work I wasn't sure how to debug it or what else to try. And wasn't really aware of that caveat with default props.
Probably the best solution would be to add noMenuIcon
prop, then it's obvious how to use it and one can't go wrong with it.
But that might be adding extra stuff to public API without much value...
Up to you, feel free to close this one, thanks for looking into it!
I created a few other issues after migration from v2 to v3, would be great if you could check them out, some of them have suggested patches, I could look into making PRs if it makes sense:
- https://github.com/vuetifyjs/vuetify/issues/17776
- https://github.com/vuetifyjs/vuetify/issues/17777
- https://github.com/vuetifyjs/vuetify/issues/17778
- https://github.com/vuetifyjs/vuetify/issues/17779
- https://github.com/vuetifyjs/vuetify/issues/17782
I would prefer this to be consciously closed by a human maintainer if they decide so