Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ColorControl breaks with React 17 #29

Open
HongchengZhao opened this issue Nov 21, 2020 · 2 comments
Open

ColorControl breaks with React 17 #29

HongchengZhao opened this issue Nov 21, 2020 · 2 comments

Comments

@HongchengZhao
Copy link

With React 17, the color picker does not show up on click. This might have something to do with attaching events to the document element. Here is a reproduction: https://codesandbox.io/s/react-three-fiber-gui-forked-r7k22

@adithyamaheshb
Copy link

adithyamaheshb commented Dec 29, 2020

In React 17, Color picker still doesn't show up on chrome, it shows up on mozilla but couldn't change the color
It keeps adding "hidden" to the color picker wrapper element every time you click on the color bar

Screen Shot 2020-12-29 at 6 10 23 PM

@ffdead
Copy link
Contributor

ffdead commented Jan 12, 2021

I don't think #30 has been published on npm yet. Any chance we can make that happen @birkir ? :)

In the meantime, the workaround is to set inline: true on the color control and then manually extract the rgba like this:

function rgba(c) {
  if (typeof c === 'object') {
    return `rgba(${c.r},${c.g},${c.b},${c.a || 1})`
  }
  return c
}

const [clearColor, setClearColor] = useState('#000');
useControl('Clear color', { type: 'color', state: [clearColor, c => setClearColor(rgba(c))], group: 'Render', inline: true });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants