Skip to content

ReactAdapterElement : useContent not working with Popovers #22456

@finn0s

Description

@finn0s

Description of the bug

I have a custom react component with a button and a popover and want to add flow components to the popover content.

DummyComponent.java

@Tag("dummy-component")
@JsModule("./DummyComponent.tsx")
public class DummyComponent extends ReactAdapterComponent {

    public DummyComponent() {
        getContentElement("footer").appendChild(new Span("Test").getElement());
    }
}

DummyComponent.tsx

import * as React from "react";
import {ReactElement} from "react";
import {ReactAdapterElement, type RenderHooks} from 'Frontend/generated/flow/ReactAdapter';
import {Popover} from '@vaadin/react-components/Popover.js';

class DummyComponent extends ReactAdapterElement {
    protected override render(hooks: RenderHooks): ReactElement | null {
        const footer = hooks.useContent("footer");

        return <>
            <Button id="test-button">Button</Button>
            <Popover for="test-button">
                {footer}
            </Popover>
        </>
    }
}

customElements.define('dummy-component', DummyComponent);

When i open the page i get the following error

java.lang.IllegalStateException: The element with the tag name 'flow-content-container' and id 'footer' was not found in the parent with id='10'
	at com.vaadin.flow.server.communication.rpc.AttachTemplateChildRpcHandler.handleNode(AttachTemplateChildRpcHandler.java:85)
	at com.vaadin.flow.server.communication.rpc.AbstractRpcInvocationHandler.handle(AbstractRpcInvocationHandler.java:79)
	at com.vaadin.flow.server.communication.ServerRpcHandler.handleInvocationData(ServerRpcHandler.java:568)
	at com.vaadin.flow.server.communication.ServerRpcHandler.lambda$handleInvocations$6(ServerRpcHandler.java:549)
	at java.base/java.util.ArrayList.forEach(ArrayList.java:1604)
	at com.vaadin.flow.server.communication.ServerRpcHandler.handleInvocations(ServerRpcHandler.java:549)
	at com.vaadin.flow.server.communication.ServerRpcHandler.handleRpc(ServerRpcHandler.java:376)
	at com.vaadin.flow.server.communication.UidlRequestHandler.synchronizedHandleRequest(UidlRequestHandler.java:136)
	at com.vaadin.flow.server.SynchronizedRequestHandler.handleRequest(SynchronizedRequestHandler.java:63)
	at com.vaadin.flow.server.VaadinService.handleRequest(VaadinService.java:1879)
	at com.vaadin.flow.server.VaadinServlet.service(VaadinServlet.java:398)
	at com.vaadin.flow.spring.SpringServlet.service(SpringServlet.java:106)

Expected behavior

The Span should be displayed in the popover content

Minimal reproducible example

Copy paste the code obove to reproduce.

Versions

  • Vaadin / Flow version: 24.9.1
  • Java version: 25
  • OS version: Windows 11
  • Browser version (if applicable): Chrome 141.0.7390.55
  • Application Server (if applicable):
  • IDE (if applicable): Intellij Ultimate

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    Status

    🔖 Normal Priority (P2)

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions