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.

Explanation

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.

Reproduction

See https://codesandbox.io/s/smoosh-cloud-3mqis?file=/src/App.js

Versions

react-select@latest as well as 4.x

Issue Analytics

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

Top GitHub Comments

4reactions

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.

2reactions

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.

Top 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...

ame-miniapp-components - UNPKG

node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js",". ... clean-state-key';\n\nvar getState = function getState(state, elementKey, ...

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...

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...

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...