[LoginOverlay] Events on slotted content do not work

[sissbruecker]

When adding a button with a click handler to the login overlay's footer or custom form area, then the handler is never called when clicking the button:

<LoginOverlay opened>
    <div slot="footer">
        <button onClick={() => console.log('click')}>foo</button>
    </div>
</LoginOverlay>

It looks like the web component contains some logic for teleporting the content from the base element to the overlay, thus manipulating the DOM rendered by React, which might then interfere with React's event system.

Instead we should probably use whatever solution other React components like Dialog use to teleport the content. Might also be an opportunity to add a more React-like API where a JSX element is passed as a prop for example.

[sissbruecker]

A workaround for now is to use a ref in order to add a native event listener:

    const buttonRef = useRef<ButtonElement>(null);
    useEffect(() => {
        const handler = () => {
            console.log('Button click');
        }
        buttonRef.current?.addEventListener('click', handler);
        return () => {
            buttonRef.current?.removeEventListener('click', handler);
        };
    }, []);

    <LoginOverlay opened>
        <div slot="footer">
            <Button ref={buttonRef}>Some action</Button>
        </div>
    </LoginOverlay>

[sissbruecker]

It looks like this issue can not be resolved without making a breaking change in the web component. The root issue is that the web component teleports (moves) slotted elements to the overlay once opened. Moving elements rendered by React is something that should never happen and can cause various issues, such as event listeners breaking in this case.

Options that have been discussed:

1. Refactor the web component to use a native dialog. Those could be rendered as a child of the login overlay element, and thus would not require creating a separate overlay element in the document and moving the slotted contents there. We could then rely on the native slot mechanism to move the elements to their proper place.
2. Refactor the web component to use renderer functions, similar to dialog. That would require introducing additional container elements that the render functions can render into - currently elements for different slots are just dumped into the same container which will not work with a render function approach.