search

JedWatson / react-select

The Select Component for React.js
https://react-select.com/
MIT License
27.49k stars 4.12k forks source link

useLayoutEffect of <MenuPlacer /> component should listen for react-select's isLoading prop #5733

Open AbeykoonOshan opened 12 months ago

AbeykoonOshan commented 12 months ago

Issue type: Bug

Issue recreation steps as follows,

  1. Click on the dropdown field input. (Then we will get the "Loading" message. This is working as expected) image

  2. After the options are loaded into the dropdown, the menu doesn't get displayed above the field as it should. The menu does get rendered below the control. The menuPlacement prop "auto" is expected to kick-in in this state. image

This is only happens once.

The issue is reproduceable in following code sandbox. (Be sure to click on the dropdown field of the page before the setTimeout timer) https://codesandbox.io/s/strange-firefly-npzlhd?file=/src/App.js

Suggestion

I'm not sure whether this is feasible or not, but i think that we should perform the menu placement calculation after isLoading state has been set to true since that is an indicator that the options for the dropdown is completely loaded.

Affected react-select version: 5.7

labkey-nicka commented 12 months ago

@AbeykoonOshan I've issued PR #5736 that seeks to address this. See https://codesandbox.io/s/silly-dust-fhx83r for an example. Let me know if this matches the behavior you would expect.

AbeykoonOshan commented 12 months ago

Hi @labkey-nicka ,

Thanks

I saw your fix and the testable sample, it all works now.

Do you have any clue on when this PR (https://github.com/JedWatson/react-select/pull/5736) will be merged.

I will close my issue since we already have a PR for this.

labkey-nicka commented 12 months ago

@AbeykoonOshan I would recommend keeping this open. Once the PR is merged it will automatically close this issue.