search

OfficeDev / microsoft-teams-ui-component-library

Component library enhanced experiences styled for use in Microsoft Teams custom applications.
MIT License
127 stars 30 forks source link

Dropdown input doesn't open all the time. #131

Open IliasLoudrassi opened 2 years ago

IliasLoudrassi commented 2 years ago

Expected Behavior

The dropdown input should open on click

Actual Behavior

The dropdown sometimes doesn't open at all, you have to refresh the page on browser in order to work

thure commented 2 years ago

Hi @ilyassloudrassi, I'm not completely sure what's going on based on your description, could you please provide steps for reproducing the issue, or ideally a CodeSandbox that demonstrates the issue?

gschumm commented 2 years ago

We have the same issue. It's hard to reproduce because it depends on the CSS class names generated dynamically by Fela (the style renderer used by @fluentui/northstar). The class names with the two characters might change when you refresh the page. But, when the issue occurs on our side the DOM for the dropdown looks like this:

<div
  class="ui-dropdown__container au pl bi by bz ca cb cc cd ce cf iu jp ix hi hj hk cr ao ft fu fv fw pm pn po pp pq pr ps pt pu pv pw"
>
  <!-- omitted for clarity -->
  <ul
    role="listbox"
    class="ui-list fi qc bf km bg kn er na es ka iu by bz ca cb qd qe qf qg cc cd ce cf mz qh px jp a hd he fv fw ui-dropdown__items-list"
    aria-labelledby="downshift-4-label"
    id="downshift-4-menu"
    aria-hidden="true"
    style="margin: 0px"
  ></ul>
</div>

Whenever the ui-dropdown__container has the CSS class ps assigned, the dropdown list (ul) is not shown on the screen. The definition of ps class is as follows:

.ps {
    overflow: hidden !important;
    overflow-anchor: none;
    -ms-overflow-style: none;
    touch-action: auto;
    -ms-touch-action: auto;
}

The overflow: hidden !important is the actual problem. If you disable it, the dropdown list is shown as expected. Otherwise it is hidden in the overflow.

We found out that the ps class is globally defined by a library called perfect-scrollbar (in file node_modules\perfect-scrollbar\css\perfect-scrollbar.css) which is a dependecy of @fluentui/react-teams.

As we cannot overwrite the !important styles, the fix has to be made in the library to avoid this conflict.

thure commented 2 years ago

I see, thank you for the detailed breakdown. @gschumm would you be willing to submit a pull request against the next branch? Since @fluentui/react-components has been released, the maintainers of this project have shifted focus to Fluent Blocks and will need the help of the community to maintain this project.