Open mvysny opened 5 months ago
Solution: add the "noinput" theme, then add this to your theme styles.css
:
vaadin-multi-select-combo-box[theme ~= "noinput"] > input[slot="input"] {
visibility: hidden;
}
vaadin-multi-select-combo-box[theme ~= "noinput"]::part(input-field) {
cursor: unset;
}
Describe your motivation
We're implementing a mobile app which uses MultiSelectComboBox for filter configuration. When the MultiSelectComboBox component is focused, both the dropdown and the on-screen keyboard appears, leading to all sorts of crazy scrolling, especially on phones with small screen size. The best way would be to either disable user input in MultiSelectComboBox, or use the native Select component in multi-select mode.
Describe the solution you'd like
MultiSelectComboBox would offer a function which would disable the ability to enter text into the component. It would effectively behave like the Native Select, but would still allow multiple values to be selected in the dropdown.
Describe alternatives you've considered
Currently Vaadin
Select
component wraps native<select>
but only allows single selection. According to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select the select element support multiselect (themultiple
attribute), however that changes the outlook and behavior of the component to a list box instead, akin to List Box, so this option doesn't really solve the issue since the component no longer looks like a combo box.Additional context
No response