fix: Dropdown list for Select component is clipped when it exceeds the bounds of the parent component

[gayaths]

🐛 Bug Report

When the Select component is used within another component, the dropdown listbox gets clipped if it exceed the bounds of the parent component (see image below).

💻 Repro or Code Sample

<fast-card>
      <fast-select>
        <fast-option value="1">Option 1</fast-option>
        <fast-option value="2">Option 2</fast-option>
        <fast-option value="3">Option 3</fast-option>
      </fast-select>
</fast-card>

🤔 Expected Behavior

Drop down should not be cropped

😯 Current Behavior

Dropdown exceeding the bounds of the parent component is clipped

💁 Possible Solution

Ideally the dropdown should be able to show, even if the parent component isn't tall enough.
Alternatively, exposing a size or max-height property would be helpful

🔦 Context

This issue means we cant use the Fast Select component in our form. Which requires us to use a different select component. This means we have to create and maintain styling and theming for two separate component libraries, which is not ideal

🌍 Your Environment

• OS & Device: Windows 10
• Browser Microsoft Edge
• Version 92.0.902.78

[chrisdholt]

@EisenbergEffect I'm going to mark this as a feature. I'll add a comment below elaborating more.

[chrisdholt]

Technically a dupe of #4791. This comment explains a bit about the problem and the long term solution: #4791 (comment)

Regarding why select doesn't break out of it's container by default, currently <select> within the browser is insanely difficult to style. The Open UI Community Group is working on this along with browser vendors, with the goal of shipping a fully customizable native control in the browser. In order to style cross browser, we currently need to create our own select, rather than using the native one. This is really the only way to ensure a unified design right now across all browsers. One feature of select currently is that it always renders into the top layer. We're discussing exposing this as well in Open UI as it is right now either through a popup element (linked in comment above) or via CSS property. With that not exposed by the browser, we need to have our own solution. #4971 details that current solution. TLDR; While we are awaiting the addition of a customizable select which is native, our current best course of action is likely to add Anchored Region to the select to enable this capability.

For the immediate timeline, you may be able to use a mix of CSS positioning for the listbox part and z-index (if the stars align) to manage this in your implementation. We'll get this pri'd accordingly and see if we can get it out in a non-breaking way.

[gayaths]

Thanks for the reply @chrisdholt.

What I have done currently is to limit the height of the listbox part by setting the max-height style for the listbox part. I do this on the click event of the select, this isnt ideal since the user can see the listbox resize. I'll try the suggestion you mentioned about setting the z-index and position styles.

Once again thanks for the help, I didnt realize select was this complicated 😥

[chrisdholt]

Thanks for the reply @chrisdholt.

What I have done currently is to limit the height of the listbox part by setting the max-height style for the listbox part. I do this on the click event of the select, this isnt ideal since the user can see the listbox resize. I'll try the suggestion you mentioned about setting the z-index and position styles.

Once again thanks for the help, I didnt realize select was this complicated 😥

No worries - we’re working to help fix it in the platform! I think we’ll see if we can pri this without a breaking change as well. Let me see what we can plan for and we’ll work to enhance this for now either way!

[chrisdholt]

We're going to get started on #4971 so I'm going to close this as a dupe of that bug.