JedWatson / JedWatson/react-select

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

Open
#5,733 3 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

issue/bug-unconfirmed
Dominant language
TypeScript
Stars
28k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the component and its useLayoutEffect, then reproduce the behavior in the linked CodeSandbox using menuPlacement="auto" and a delayed isLoading change. Done means the menu placement is recalculated after loading finishes and the menu can appear above the field when appropriate; add or run the relevant placement tests if present.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.