ColorInput / ColorPicker issue with React 18
See original GitHub issueWhat package has an issue
Describe the bug
When using NextJS, the ColorInput / ColorPicker components have an issue where their value isn’t updated properly when changing the value by clicking on a color in the ColorPicker.
Clicking sets the value to a color that is not the color that was clicked, and the first click sets the value to null
, as can be seen in the console in the preview below.
I have not been able to reproduce it in setups where NextJS is not used. In those setups the issue does not occur.
In which browser did the problem occur
I’ve checked and reproduced it in Chrome and Firefox, have not tried others
If possible, please include a link to a codesandbox with the reproduced problem
https://codesandbox.io/s/happy-water-51glnv?file=/pages/index.tsx
Do you know how to fix the issue
No
Are you willing to participate in fixing this issue and create a pull request with the fix
No
Possible fix
No response
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:8 (5 by maintainers)
Top Results From Across the Web
React input color picker - Stack Overflow
I am trying to have a color picker and put the value into a state variable "color". const [color, setColor] = useState(false); const...
Read more >React Color
In this case, the color picker will initialize with the color #fff . When the color is changed, handleChangeComplete will fire and set...
Read more >material-ui-color-picker - npm package - Snyk
Ensure you're using the healthiest npm packages. Snyk scans all the packages in your projects for vulnerabilities and provides automated fix advice.
Read more >mui-color-picker - NPM Package Overview - Socket.dev
mui-color-picker. <ColorInput> component for material-ui v5 forked from Loic Mahieu,. 3.5.1latest ...
Read more >How to use the color picker in ReactJS | by React Developer
Let's begin with a tutorial on how to utilize the color picker in React applications. When you want to modify the style of...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Already fixed, will be out with 5.0
Fixed in 5.0