React-color: Color picker UI does not update on drag (possibly related to SSR)

[chrysb]

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.

[chrysb]

Update: I managed to get it to render only on the client-side, but I'm still experiencing the same issue where dragging does not update the UI.

React version 16.13.1

[hkurra]

@chrysb In latest React this is could be related to issue #754 quick fix is save the changed colour in your local state and provide that as input through colour props

[TejaReddy7]

Same issue with we drag or click doesn't work, #754 quick fix is also not working.

[hkurra]

@TejaReddy7 Then it could be a different issue, but here is the codesanbox where you can see if you will remove the color props drag will stop working

[TejaReddy7]

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

[ashishsangale]

Try using onChangeComplete instead of onChange @chrysb

[JamsheedMistri]

@TejaReddy7 Then it could be a different issue, but here is the codesanbox where you can see if you will remove the color props drag will stop working

My color property is set to a state variable, which is being updated correctly using onChange. The variable is updating, however, it is not visibly changing the color picker's selection.

While it's working correctly, I'd love to know if there's a workaround to live-updating the color picker, as it seems to be frozen in time.

[qWici]

Same
Node: 14.0.0
NPM: 6.14.8

Deps

json { "name": "segway", "version": "0.1.0", "private": true, "dependencies": { "@babel/preset-react": "^7.12.10", "@craco/craco": "^6.0.0", "@testing-library/jest-dom": "5.11.6", "@testing-library/react": "11.2.2", "@testing-library/user-event": "12.6.0", "@types/jest": "26.0.19", "@types/node": "12.19.9", "@types/react": "17.0.0", "@types/react-color": "^3.0.4", "@types/react-dom": "17.0.0", "axios": "^0.21.1", "babel-preset-react-app": "^10.0.0", "classnames": "2.2.6", "connected-react-router": "6.8.0", "history": "4.10.1", "react": "17.0.1", "react-color": "^2.19.3", "react-dom": "17.0.1", "react-hook-form": "^6.14.2", "react-redux": "7.2.2", "react-router": "5.2.0", "react-router-dom": "5.2.0", "react-scripts": "4.0.1", "redux": "4.0.5", "redux-devtools-extension": "2.13.8", "redux-logger": "3.0.6", "redux-saga": "1.1.3", "typesafe-actions": "5.1.0", "typescript": "4.1.2" }, "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@types/classnames": "2.2.11", "@types/node-sass": "4.11.1", "@types/react-redux": "7.1.12", "@types/react-router": "5.1.8", "@types/react-router-dom": "5.1.6", "@types/redux": "3.6.0", "@types/redux-logger": "3.0.8", "@types/redux-saga": "0.10.5", "node-sass": "4.14.1" } }