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

ColorInput / ColorPicker issue with React 18

See original GitHub issue

What package has an issue

@mantine/core

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.

https://user-images.githubusercontent.com/34271675/163398804-b3d28c0e-6443-43d8-93e8-cad96d5c2b20.mp4

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:closed
  • Created a year ago
  • Reactions:1
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

5reactions
rtivitalcommented, May 22, 2022

Already fixed, will be out with 5.0

2reactions
rtivitalcommented, Jul 25, 2022

Fixed in 5.0

Read more comments on GitHub >

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

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 Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found