MultiSelectComboBox: add option to disable keyboard input

[mvysny]

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 (the multiple 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

[mvysny]

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;
}