ChakraUI Select doesn't display when used within Canvas <rect> as `foreignObject`, displays randomly (browser draw issue?)

I wanted to try using ChakraUI Select component in a Canvas (SVG) as foreignObject.

The issue doesn’t seem to be specific to ChakraUI, I tried using React-Select component, which suffers from a similar issue.

Here’s what initially displayed by the browser:

Once I scroll and leave the element and come back (force browser redraw I guess?) it displays:

Reproduction video: https://youtu.be/qnVYN4ekT2k

I don’t know what’s causing this, it feels like it’s a drawing issue. I don’t know if that might be caused by ChakraUI, or a bug in Reaflow. I’ve opened an issue at https://github.com/reaviz/reaflow/issues/44.

Although, I believe it’s related to ChakraUI because the native HTML select element works just fine.

Minimal reproduction of the problem with instructions

Branch: https://github.com/Vadorequest/poc-nextjs-reaflow/tree/repro-select-not-drawn Online demo: https://poc-nextjs-reaflow-htvwfpkjc.vercel.app/

Run locally:

• git clone https://github.com/Vadorequest/poc-nextjs-reaflow.git
• cd poc-nextjs-reaflow && git checkout repro-select-not-drawn
• yarn && yarn start
• Open http://localhost:8890
• Create a “Question” node (drag and drop it)

Version

Using @chakra-ui/react 1.2.1 Using React 17.0.1

[with-heart]

All of the selects seem to work fine if I add position: fixed to the child div of foreignObject: https://codesandbox.io/s/elated-burnell-5mupm?file=/src/components/nodes/QuestionNode.tsx:2802-2882

Adding ChakraProvider to _app even makes it render with the expected styles: https://codesandbox.io/s/blazing-sea-gr9i4?file=/src/pages/_app.tsx

[with-heart]

Glad I could help 😃