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.

Color picker UI does not update on drag (possibly related to SSR)

See original GitHub issue

Hi there — first off, thanks for making this!

I implemented this and I’m seeing the following error in console:

Warning: Prop `style` did not match. Server: "position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:url(null) center left" Client: "position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==) center left"
    in div (created by Checkboard)
    in Checkboard (created by Chrome)

We are using NextJS so I’m wondering if the issue comes from that.

Dragging still works in that it returns the proper value in onChange, but it does not update the UI so it looks like it’s stuck.

Screen Recording 2020-09-07 at 11 14 AM

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:5
  • Comments:10

github_iconTop GitHub Comments

4reactions
TejaReddy7commented, Sep 11, 2020

@hkurra drag is working, but sketchpicker is not moving, it remains unchanged does not reflect color change.

0reactions
Scondiccommented, Dec 1, 2022

You can solve this by loading the ChromePicker on the client using Next.js dynamic imports. https://nextjs.org/docs/advanced-features/dynamic-import

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why is my React Color popup not updating? - Stack Overflow
However, when I open my popup and drag the selector in SketchPicker , the color in the UI does not update, and the...
Read more >
CHANGELOG - Naive UI
Fix n-input-number may not update input when value is set in on-blur callback. ... Fix n-color-picker can't input alpha value correctly manually.
Read more >
Color picker color selector doesn't work in IE11 - Telerik
Hello, I have recently implemented the Color Picker in my site and I'm having issues in IE 11. The color picker opens, however,...
Read more >
Changelog - Shoelace
Breaking changes in components with the Stable badge will not be accepted ... a bug in <sl-color-picker> that sometimes prevented the color from...
Read more >
Changelog | High Definition RP | 13.1.9 - Unity - Manual
Fixed Nans happening due to volumetric clouds when the pixel color is ... Fixed Render Graph Debug UI not refreshing correctly in the...
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