Embedding Vaadin Application as WebComponent into React does not always propagate attributes

contradictioned commented 5 months ago

Description of the bug

I export a Vaadin WebApplication with attributes. When I embedd the WebApplication into a React app, sometimes the attributes work, sometimes they don't. It feels like, as soon as there is conditional rendering involved, the attributes are not sent.

There's a reproducer in https://github.com/contradictioned/VaadinWebComponentWithReact . The Vaadin-Part of this repo is simply the starter name-greet-hello-world-App exported as webcomponent <my-web-component initial-name="x"> where "initial-name" is an attribute with default value "none". The value of this attribute is used as placeholder for the input field.

In web-component-hosts/react-vite/src/App.tsx there's the App() that simply renders <my-web-component initial-name={name}> with name = "Alice". This initial-name attribute is picked up by the Vaadin application without problem. But there is also the Nested element which renders a <my-web-component initial-name={name}> only if count is odd; or if you try it in the browser on every other click of the "Click me"-button; and here also name = "Alice". This time, the initial-name attribute is not picked up by the Vaadin application but the default-value of "none" is used.

Optically, this looks as follows: On top the conditionally included WebComponent, on the bottom the "statically" included one: grafik .

Some digging results

When looking into the browser's debug log, I see the "static" webcomponent registration as

15:32:54.569 registering 
<my-web-component initial-name="Alice" unnecessary-attribute="foo"> using id MyWebComponent-0
15:32:54.643 Sending xhr message to server: {"csrfToken":"45b26709-f94f-43d3-975b-29507c3f49ec","rpc":[{"type":"event","node":1,"event":"connect-web-component","data":{"tag":"my-web-component","id":"MyWebComponent-0","userAssignedId":"","attributeValues":{"initial-name":"Alice"}}}],"syncId":0,"clientId":0}

so here "attributeValues" are sent as expected (and for good measure I tested an unneccessary attribute). And the conditionally rendered webcomponent had these log lines:

15:36:57.869 registering 
<my-web-component initial-name="Alice" unnecessary-attribute="foo">
 using id MyWebComponent-1
15:36:57.878 Sending xhr message to server: {"csrfToken":"45b26709-f94f-43d3-975b-29507c3f49ec","rpc":[{"type":"event","node":1,"event":"connect-web-component","data":{"tag":"my-web-component","id":"MyWebComponent-1","userAssignedId":"","attributeValues":{"initial-name":"none"}}}],"syncId":1,"clientId":1}

so, the registered component looks right, but the xhr-message did not contain "Alice".

Further, I placed a very simple webcomponent, ManualWc as sibling of the Vaadin-Web-Component that just logs when its lifetime methods are called and the current attributes. When filtering the browser log for "MANUAL-WC" you see this, and there is basically no difference between the "static" and "conditional" placements here.

Expected behavior

The WebComponent attribute should be picked up by the Vaadin Application, i.e., the onChange-handler should also be called with the initial value of the attributes.

Minimal reproducible example

See https://github.com/contradictioned/VaadinWebComponentWithReact

start the vaadin app, e.g. using ./mvnw
cd into web-component-hosts/react-vite run npm install and npm run dev to start the react server
Browse the vite application. The part above the horizontal row conditionally shows the webcomponent and toggles it on every click, the part below the hr "statically" includes the webcomponent. The placeholder of the input-field is provided as attribute of the webcomponent and is "Alice" if everything is fine and "none" if the default value is used.

The first commit in this repository is basically just a Hello World project from https://start.vaadin.com/app .

Versions

Flow: 24.3.10 Vaadin: 24.3.12 Java: Azul Systems, Inc. 21.0.3 OS: aarch64 Mac OS X 14.5 Browser: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:126.0) Gecko/20100101 Firefox/126.0 and Browser: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Live reload: Java active (Spring Boot Devtools): Front end active

mshabarov commented 5 months ago

Thanks for the issue and comprehensive description with the reproducible example.

One quick note is that the Vaadin 24.3 might have "Flow in React" feature partially implemented, i.e. not supported fully, whereas the 24.4 release should support it. I remember some timing issues in web-component rendering, that was very similar to that you described and then we fixed them in 24.4.

I'm going to test your example project with 24.4.0.beta5, where I expect this should work without issues.

mshabarov commented 5 months ago

Right, this seems to be fixed in Vaadin 24.4, I was able to reproduce it with 24.3.12 and when I upgrade the Vaadin version to 24.4.0.beta5, then attribute value is sent to the server as expected (upgrade Vaadin version - > clean up, delete bundles, node_modules -> repeat the steps that you gave in the descr):

Screen Recording 2024-05-30 at 14 26 25

We have no plans to backport the full support for "Flow in React" into Vaadin 24.3. Please use Vaadin 24.4, should be released in GA soon.

The issue is proposed for closure.

contradictioned commented 5 months ago

Hey, thanks for investigating! I tried upgrading our main application to 24.4-beta and it works. I hope, that 24.4 lands quickly :)

vaadin / flow