gatanaso/multiselect-combo-box-flow

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

FLecorps opened this issue · 7 comments

FLecorps commented

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 commented

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).

yoursnowyfriendleo commented

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?

image

Cheers, Simon

gatanaso commented

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

yoursnowyfriendleo commented

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.

image

Cheers, Simon

gatanaso commented

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?

yoursnowyfriendleo commented

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.
image

gatanaso commented

@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:
img

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