fluentui

fluentui copied to clipboard

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
    Memory: 8.06 GB / 31.85 GB
  Browsers:
    Chrome: 116.0.5845.141
    Edge: Spartan (44.22621.2134.0), Chromium (115.0.1901.183)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @fluentui/react: 8.110.11 => 8.110.11
    @fluentui/react-components: 9.30.1 => 9.30.1
    @fluentui/react-migration-v8-v9: 9.3.11 => 9.3.11
    @fluentui/react-portal-compat: 9.0.72 => 9.0.72

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/s/heuristic-moser-vttv3x?file=/example.tsx

Bug Description

Actual Behavior

1. Have a combobox/dropdown with the following properties:
   • Full width
   • Not at the top of the page
   • More items than fit on the screen
2. Open the combobox
3. Scroll to the bottom, and select the last item
4. Instead of selecting the last item, the list scrolls up a little

The problem seems to be that it wants to open the list to the right side of the combobox but can't. If you remove the width: 100%, the list opens to the right and has a certain height. If you now keep the width, but remove the autoSize, it will have that exact same height, and cause a scrollbar in the page. How much the list moves down because of the width 100% is close to how much the list scrolls when trying to select the last item.

Expected Behavior

Be able to select the last item in a longer full-width combobox.

Logs

No response

Requested priority

High

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

Can you please prioritise this? It's also happening for us. We just migrated to FluentUI v9. It happens when we set positioning "autoSize" to "height"

We got the same issue as well. Anyone have a good workaround that you can suggest?

@smhigley do you have any tips for this?

The workaround I'm currently using is setting the position fixed with positioning={{ position: 'below', autoSize: 'height' }}

I will give that a shot tomorrow. Thank you!

@tudorpopams @smhigley @WanderG Unfortunately the workaround you have provided WanderG doesn't work for me. The problem is that if there is space on the left or right, and it's a long menu, then it will prefer to render on the left or right. Please see this minimal sandbox, notice the padding around the component: https://codesandbox.io/s/autosize-workaround-v9j2wt?file=/AutosizeBugs.tsx

I don't think a Dropdown/ComboBox should ever render it's contents on the left or right, it seems like in 99% of cases it should render above or below.

This is still an issue, can it be prioritised?

we have the same problem too :(

Hello @WanderG , @goamn and @hussain-s6 , could you please give more details on this issue? I'm using a link on codesandbox and I can't reproduce it.

I tried in Chrome, Edge and Firefox. The only issue I see is that the scrollbar is flickering in Chrome and Edge.

Is this issue still reproducible? For now I'll check why the scrollbar is flickering

Hello @WanderG , @goamn and @hussain-s6 , could you please give more details on this issue? I'm using a link on codesandbox and I can't reproduce it.

I tried in Chrome, Edge and Firefox. The only issue I see is that the scrollbar is flickering in Chrome and Edge.

Is this issue still reproducible? For now I'll check why the scrollbar is flickering

Hi @ValentinaKozlova , unfortunately it's still reproducible, please see this codesandbox: https://codesandbox.io/p/sandbox/autosize-workaround-covertarget-lgnq29?file=%2Findex.html

The main issue is: you can't force the dropdown menu to open "below". It will open from the left or right side if there is room on the left or right side (it prefers that). This is quite annoying and unfortunately we found one ugly workaround which is to set positioning={{ coverTarget="true" }}. We haven't migrated all dropdowns to FluentUI v9 because of this issue.

The main issue is: you can't force the dropdown menu to open "below". It will open from the left or right side if there is room on the left or right side (it prefers that). This is quite annoying and unfortunately we found one ugly workaround which is to set positioning={{ coverTarget="true" }}. We haven't migrated all dropdowns to FluentUI v9 because of this issue.

Looks like problem is not with a Dropdown or Combobox, but with react-positioning. It calculates wrong coordinates when there's no enough space.

The main issue is: you can't force the dropdown menu to open "below". It will open from the left or right side if there is room on the left or right side (it prefers that). This is quite annoying and unfortunately we found one ugly workaround which is to set positioning={{ coverTarget="true" }}. We haven't migrated all dropdowns to FluentUI v9 because of this issue.

Looks like problem is not with a Dropdown or Combobox, but with react-positioning. It calculates wrong coordinates when there's no enough space.

I agree, however it's not the consumer's choice to use react-positioning, it's fluent UI's decision to embed it inside their components. I don't think it's correct to let Dropdowns open out from the left or right, they should have a default behavior (or at least a flag) of opening from the bottom or top. @ValentinaKozlova Are the plans to fix this or modify the behavior?

The main issue is: you can't force the dropdown menu to open "below". It will open from the left or right side if there is room on the left or right side (it prefers that). This is quite annoying and unfortunately we found one ugly workaround which is to set positioning={{ coverTarget="true" }}. We haven't migrated all dropdowns to FluentUI v9 because of this issue.

Looks like problem is not with a Dropdown or Combobox, but with react-positioning. It calculates wrong coordinates when there's no enough space.

I agree, however it's not the consumer's choice to use react-positioning, it's fluent UI's decision to embed it inside their components. I don't think it's correct to let Dropdowns open out from the left or right, they should have a default behavior (or at least a flag) of opening from the bottom or top. @ValentinaKozlova Are the plans to fix this or modify the behavior?

I'm currently working on fixing it

Hey @goamn, here's a draft PR to check if the issue is caused by fallback positions: #31891 If you have time, could you please check if this fix resolves the problem. Listbox is not displayed from the right side anymore.

@ValentinaKozlova It works great, it now opens below or above, which is what I think everyone would expect of a dropdown/combobox. Would be great if you can merge this in officially

@goamn just to check, does the original issue of not being able to select the last item repro for you? I'm also not able to repro that currently on my machine; I think it may have been fixed by the default inclusion of autoSize in positioning. Let me know if that still occurs for you though, and if it does, what browser/OS you see it in.

If the only issue is that the listbox is displayed to the left or right when it can't fit above or below, that would need a larger discussion since changing it would be a breaking change. The current behavior matches what we have in Fluent v8, where the popup also falls back to rendering to the left/right when it doesn't fit.

If you want to override or alter that behavior, there are a couple options:

1. To make it less likely to happen without completely preventing the listbox from rendering to the right/left on short screens or with zoom, it might be worth adding a maxHeight style to trigger scrolling before repositioning when you have many options.
2. To fully override that behavior, set fallbackPositions: ['above'] in the positioning prop, which will only allow the listbox to render above or below the trigger. I've modified the example to demo that option: https://codesandbox.io/p/sandbox/strange-booth-zp7pyq?file=%2Fexample.tsx%3A18%2C30

Would either of those work for your use case?

@goamn just to check, does the original issue of not being able to select the last item repro for you? I'm also not able to repro that currently on my machine; I think it may have been fixed by the default inclusion of autoSize in positioning. Let me know if that still occurs for you though, and if it does, what browser/OS you see it in.

If the only issue is that the listbox is displayed to the left or right when it can't fit above or below, that would need a larger discussion since changing it would be a breaking change. The current behavior matches what we have in Fluent v8, where the popup also falls back to rendering to the left/right when it doesn't fit.

If you want to override or alter that behavior, there are a couple options:

1. To make it less likely to happen without completely preventing the listbox from rendering to the right/left on short screens or with zoom, it might be worth adding a maxHeight style to trigger scrolling before repositioning when you have many options.
2. To fully override that behavior, set fallbackPositions: ['above'] in the positioning prop, which will only allow the listbox to render above or below the trigger. I've modified the example to demo that option: https://codesandbox.io/p/sandbox/strange-booth-zp7pyq?file=%2Fexample.tsx%3A18%2C30

Would either of those work for your use case?

That worked. Would be nice to document this in Dropdown/Combobox storybook, or at least have a link inside them to a new page about positioning to recommend changing the fallbackPositions. I tried pretty much everything else (strategy, position, align, flipBoundary, autoSize, coverTarget). Covertarget is a workaround but it was really ugly.

Regarding the bug "last item can't be clicked", I was able to reproduce it in the past only because I was trying out workarounds to try and prevent the dropdown from opening to the left and right. I can't seem to reproduce it now.

Hey @goamn, I added documentation about fallback positions here: #31891 It'll be available soon on this page: https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--default