New Features: Hide/Disable Input field + Improve Compact Mode

[FLecorps]

Hey Goran,

AWESOME Component: Simple and clear.

Still a couple of questions/requests:

• is it possible to hide the input field (=no more user search with the keyboard)? to disable it?
• an "enhanced" compact mode would be great: showing only the first selected item, then the count of selected items (see the "Kategorie" component in https://www.galaxus.ch/de/search?q=processor )

Again, great work!
Best Regards,
Fred

[gatanaso]

Thanks for the feedback and for the feature suggestion. Regarding the hiding/disabling of the input field, you can disable the component or set it to readonly (although I am not sure if that fits your use case).

[SimonC-24]

Agree, awesome component.

However, I would also need to hide input field, showing selected items only. Any way to achieve that with the current version of the component?

Cheers, Simon

[gatanaso]

Hi @yoursnowyfriendleo,

You can hide the input field via CSS by hiding the underlying part="input-field":

[part="input-field"] {
 display: none;
}

Hope this helps,
Goran

[SimonC-24]

Hi @gatanaso
Unfortunately, does that not work. It hides drop-down arrow, but keeps the space for input-field, which is the opposite of what I need.

Cheers, Simon

[gatanaso]

Hi @yoursnowyfriendleo,

Yes, that is expected as the arrow icon is part of the input field :)

However, it's interesting that it would still take up space in the page even though it's removed. Have you inspected this already?

[SimonC-24]

Ok, there are two parts with "input-field" If I display:none the first one, the space is not visible, but also not the arrow. Furthermore, the dropdown it opens is not wide enought to show items without truncation.
If I display:none the second, space is visible.

[gatanaso]

@yoursnowyfriendleo Ah yes, I forgot to clarify you need to target the input field that is part of the multiselect-combo-box-input. And yes, if you do this, the down arrow is not visible (as that is part of the field itself).

Furthermore, the dropdown it opens is not wide enought to show items without truncation.

This is interesting, as I think the dropdown should be the width of the whole field. For example:

Though to get this, you need to have some value present in the MultiselectComboBox, otherwise it just looks weird.

I applied the following style (file name and location: frontend/styles/multiselect-combo-box-input-styles.css

.multiselect[part="input-field"] {
  display: none;
}

And then had it imported in my view as follows:
@CssImport(value = "./styles/multiselect-combo-box-input-styles.css", themeFor = "multiselect-combo-box-input")

Hope this helps,
Goran