codaworks / react-glow

Because this code naively duplicates the elements:

Line 110 in bb2fb16

{children}

It creates issues when using <input> or <form ref={...}.

Issues I noticed:

the ref gets updated to the cloned element's ref and hence is disconnected from inputs
if I move the form above <Glow> that helps, however, now there are duplicated inputs inside the form, and if the cloned ones have required on them for example, they will fail validation.

The cloning of the children is required for the effect to properly work. In your case you could likely use a callback ref and check if the ref object is already set before assigning.

I will add an explainer to the readme and list all the limitations and implications of this behavior.

Perhaps instead of rendering children twice directly, a solution like the following might work:

React.cloneElement(child, { ref: null })

It would need to be done recursively via something like:

https://stackoverflow.com/a/57993188

Or via: https://github.com/fernandopasik/react-children-utilities

One other quirk with forms was that the placeholder text, or previous text in the inputs would "ghost" over when hovering.

I worked around this with glow:text-transparent on the input/select elements.

Does not work properly with forms