Add support for "mdc-menu-surface--fixed" in ui-select

[leibale]

Hi,

In order to use the select component inside of an element that has overflow: hidden without the droplist being cut we need to add the "mdc-menu-surface--fixed" class to the ".mdc-select__menu" element (https://github.com/material-components/material-components-web/issues/5590#issuecomment-657032119)

An argument like fullwidth will be very appreciated :)

Thanks

[elf-mouse]

Hi @leibale , Thank you so much for this issue :)

I am preparing for the release of a new version this week. And I will check and fix this bug in the new version.

[jfrag]

Hi,

Get the same issue with ui-autocomplete on a dialog.

[elf-mouse]

@leibale ,

It's improved.

• balm-ui@8.7.3 for vue2
• balm-ui@9.1.0 for vue3

[elf-mouse]

@jfrag ,

<ui-autocomplelte> has no such problems in the <ui-dialog>, because the dialog is scrollable.

[leibale]

@elf-mouse I think that something went worng in the release of last version, cause I updated to 9.1.0 and I can't find the fixedWidth attribute on <ui-select> (I've also opened node_modules/balm-ui/src/scripts/components/selection-controls/select.vue- the fixedWidth attribute is not there...)

[elf-mouse]

Yes, after internal discussions in our team, we felt that this prop was not very user-friendly, so we restored this prop in 9.0.2. See Changelog for details.

Current interaction effect:

• Default dialog
• Select in dialog
• Autocomplete in dialog

[leibale]

@elf-mouse so how can I solve the issue in a custom component that has overflow set to hidden?

[elf-mouse]

Hi @leibale ,

It's improved again in 9.2.0, the select is auto fixed in dialog now.

Set an explicit width by data-width, this way it won’t break the original APIs.

<ui-dialog>
  <ui-dialog-content>
    <ui-select data-width="200px"></ui-select>
  </ui-dialog-content>
</ui-dialog>

[jfrag]

@jfrag ,

<ui-autocomplelte> has no such problems in the <ui-dialog>, because the dialog is scrollable.

ok. it's not user friendly... it's possible to have a parameter for ui-autocomplete to overflow the dialog ?

[elf-mouse]

@jfrag ,

Yes. but <ui-select> and <ui-autocomplete> are implemented differently. I will consider improving this issue for <ui-autocomplete> in the next version.

Please new issue for <ui-autocomplete>.

Thanks again :)

[jfrag]

Ok

Thank you for your help and your good work !

[leibale]

@elf-mouse is there a way to enable it only for a specific <ui-select> and set the width on the element? I have a <ui-select> inside a custom scrollable component..

[elf-mouse]

Hi @leibale , balm-ui@9.3.0 released :)

Now, you can use <ui-select fixed data-width="xxx"> (set an explicit width in data-width, e.g. 200px) for the select inside a overflow hidden component.

[leibale]

@elf-mouse

Currently, the fixed boolean is saved in the global state variable, which means that there's no way to have 2 <ui-select> at the same time on the page while having one of them inside an overflow hidden component and the other one in a regular component (without the mdc-menu-surface--fixed class). Also, I don't understand when state.fixed goes back to false after it's being set to true.

Thank you for this amazing module, and your work! :)

[elf-mouse]

Hi @leibale ,

This is a small bug, I have fixed it in 9.3.1.

app.use(BalmUI, {
  UiSelect: {
    fixed: true // I don't recommend the default fixed for global, but you can set according to the actual scene
  }
});

Thank you very much for your long-term support :)