Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ValueContainer loose click event after isDisabled state

See original GitHub issue

Are you reporting a bug or runtime error?

A bug.


An isDisabled property is dynamically set then deactivated on a bare select.
After it being deactivated, the value container (ValueContainer) can’t receive any click events, or at least does not have any effect anymore (opening menu, etc), while the dropdown indicator still can…
Focusing out of the select, then clicking again works as expected.




react-select@latest as well as 4.x

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:2
  • Comments:9

github_iconTop GitHub Comments

aesycommented, Sep 2, 2022

I’d love to see #5246 merged. I tried it and it works as advertised!

Edit: Since the PR isn’t getting much attention: if keeping focus isn’t important then you can add the blurInputOnSelect boolean property as a workaround.

Rall3ncommented, Mar 15, 2022

This is a problem of how browsers handle to-be-disabled elements differently.

I ran the provided CodeSandbox example in both a current Chromium browser and Firefox. I have added an interval which logs the currently focused element (document.activeElement) to the console. I also added handlers for onFocus and onBlur to check if any occurred

When testing the example in Firefox, I could observe that it keeps the <input> element as the active element when the component gets disabled, but it does not fire a blur event in process. The Chromium browser does not fire a blur event either, but it does not keep the <input> element as the active element (instead it moves focus to <body>). Also Firefox does not fire a focus event when re-enabling the component.

This difference is why it does not work with Firefox, but with every other browser instead. Possible fix would be to do the same we do for programmatically disabling but in reverse.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React-Select losing focus for custom component ...
Keyboard is not working anymore because you miss the Input component that is focused when you open the Menu . ValueContainer has two...
Read more >
ame-miniapp-components - UNPKG
node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js",". ... clean-state-key';\n\nvar getState = function getState(state, elementKey, ...
Read more >
Building Web Apps with R Shiny - Lisa DeBruine
You can run the application by clicking. # the 'Run App' button above. #. # Find out more about building applications with Shiny...
Read more >
Tools Guide for Fortify WebInspect Products - Micro Focus
On the Fortify WebInspect menu bar, click Edit > Default Settings. ... After scanning, you may want to disable the NTLM authentication settings...
Read more >
Stop react-select from expanding as options are added-Reactjs
const ValueContainer = ({ children, getValue, ...props }) => { var values = getValue(); var valueLabel = ""; if (values.length > 0) valueLabel...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found