ColorControl breaks with React 17

[HongchengZhao]

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]

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

[ffdead]

I don't think https://github.com/birkir/react-three-gui/pull/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 });