search

open-wc / form-participation

Helper, mixins, tools, and more for supporting your custom elements in participating in an ancestor form.
MIT License
55 stars 7 forks source link

Not associating with form in React? #50

Closed hrmcdonald closed 1 year ago

hrmcdonald commented 1 year ago

We're having issues in React. Controls seem to get associated fine outside of React, but within a React app the control never seems to get associated with the form?

The internals seem to recognize the form and everything works like normal, but the FormData pulled from the form in React doesn't properly contain the web component control's name and value?

Curious if anyone else has run into this? I'll try to get an example recreation online soon.

hrmcdonald commented 1 year ago

This might be an issue with @lit-labs/react actually. Investigating further and will report back.

ChellappanRajan commented 1 year ago

Could be related to this:https://github.com/lit/lit/issues/3912#issuecomment-1624359885?

hrmcdonald commented 1 year ago

Could be related to this:lit/lit#3912 (comment)?

I don't think we're doing any cloning anywhere with this though?

ChellappanRajan commented 1 year ago

Could be related to this:lit/lit#3912 (comment)?

I don't think we're doing any cloning anywhere with this though?

I intended to add this issue https://github.com/lit/lit/issues/3418 , but mistakenly added above one sorry

hrmcdonald commented 1 year ago

It turns out the issue was that we were declaring name as a @property() but not reflecting it. The react wrapper prefers setting values via property, so name was never getting declared on the element here.

The solution was just to make the name attribute reflect:

@property({ reflect: true }) name = '';
calebdwilliams commented 1 year ago

Thanks for the follow up!

michaelwarren1106 commented 1 year ago

interesting. so to clarify, because name wasn’t a reflected attribute, the lit react wrappers didn’t recognize it as a “prop” that would be settable via jsx in the component?

hrmcdonald commented 1 year ago

interesting. so to clarify, because name wasn’t a reflected attribute, the lit react wrappers didn’t recognize it as a “prop” that would be settable via jsx in the component?

It's more because of the fact that the Lit React wrapper prefers setting properties via javascript. Thus the name attribute was never actually being set on the element. It was on the property, but not reflected to the attribute in the DOM, which appears to be what the native form actually checks for when generating form data. So in effect, while the value was getting set via element internals properly, it's name never was visible so the data never showed up in submissions.

michaelwarren1106 commented 1 year ago

that makes sense. TIL.