Buttons for social logins in footer of LoginOverlay not handling onClick

Hilla
1

Hi!

Hilla 24.5.2 user here. In the footer of my LoginOverlay I would like to have buttons for social login with Google etc. I added

<div
	slot="footer"
>
	<hr/>
	<Button
		onClick={async () => {
			console.log("Sign in with Google clicked");
			socialSignInWithGoolge();
		}}
	>
		{i18n.t("login.social.google")}
	</Button>
</div>

When clicking the button the onClick is not called. Are the events somehow prevented to enter the onClick handler of the button? What can I do?

Thanks in advance
Olaf

2

That seems to be a bug in the component. Created an issue here: [LoginOverlay] Events on slotted content do not work · Issue #269 · vaadin/react-components · GitHub.

A workaround could be to use a ref and add a native event listener:

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

    <LoginOverlay opened>
        <div slot="footer">
            <Button ref={buttonRef}>Login with Google</Button>
        </div>
    </LoginOverlay>
3 Likes