Looks like starting in React 17 generated events require the bubbles prop to be set for proper handling.

https://reactjs.org/blog/2020/08/10/react-v17-rc.html#changes-to-event-delegation
Reference discovered in this stack post https://stackoverflow.com/questions/51026510/react-ref-form-onsubmit-handler-not-triggered/66659749#66659749

I came across this while investigating issues I was having with form submission event handling when triggered by child web components with in the shadow dom.

Setting the 'bubbles' prop on the event solved the issue and allowed for proper event handling by react triggering form control and expected onsubmit behavior.

Adding this to

All of the other @open-wc packages we leverage are published with the "type": "module" package.json configuration. Is there any reason why @open-wc/form-control specifically is not considering @open-wc/form-helpers is? It has just caused some strange build errors that might prevent us from leveraging it.

I'm trying to use my components with Lit SSR, but the ones using FormControlMixin cause this error:

TypeError: this.attachInternals is not a function

Is there anything I could do to prevent this?

One of my devs got an error today about an attribute property not existing on a validator object.

The error came from this line:
https://github.com/open-wc/form-participation/blob/main/packages/form-control/src/FormControlMixin.ts#L39

Which seems to be coded as if the attribute key in the validator object is required, but its typed as optional in the TS typing. IMO it should be optional, so should we do an existence check on the .attribute prop in that map function?

As far as I see currently we are not able to set custom async validators. Do you have a design decision to stick to sync validators or is it just ok for adding async support with a PR?

I'm using this library to build a form that consist on a custom input and a custom submit button. Submit button uses submit helper from form-helpers. I expect that submitting form directly without making any change should trigger form validation, block form submit and show error messages. But;

1. If there is a validation error in the form (like a required field) submit helper doesn't call submit. It only calls reportValidity of form. But as far as I see, form's reportValidity doesn't call our custom inputs' reportValidity methods. So form submission is being blocked but no errors shown.
2. I'm trying to catch submit event of the wrapping form in my custom input to call its own reportValidity method but since submit event doesn't happen with submit helper, it doesn't help as well. (This works with native <button type="submit">)
3. Validators doesn't run when we don't set a value, so validityCallback is not called if there is no use interaction (like initial state). I have an input like <my-input required> and if user immediately submits the form, required validator of the component doesn't work. Because validityCallback doesn't work, I can not override default error message in this case.

It would be great to have a comprehensive form example that has custom input and custom form submit button both uses this library and shows default or custom error messages once form is submitted.

I tried to demonstrate the issue but couldn't manage it easily in a playground (setup needs some considerable time). But if it's difficult to understand the issues I explained, I can spend more time to show an example.

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.

Reproducing

When I set up a new vite project using the lit-ts template, and using this component while installing @open-wc/form-control I am getting the following error.

🐛 Reproduced Error Demo

Error

Uncaught (in promise) Error: The following properties on element fd-input will not trigger updates as expected because they are set using class fields: value. Native class fields and some compiled output will overwrite accessors used for detecting changes. See https://lit.dev/msg/class-field-shadowing for more information.
    at Input.performUpdate (reactive-element.ts:1275:17)
    at Input.scheduleUpdate (reactive-element.ts:1234:17)
    at Input.__enqueueUpdate (reactive-element.ts:1206:25)

Expected Behavior

The component works just fine as it does in this Demo

Actual Behavior

The app is just showing nothing instead and throws the above mentioned error

Problem

The FormControlMixin currently exposes the setValue method as a public method on elements that use the mixin. When using the FormControlMixin to build a published component for other teams to use, this can lead to confusion when consuming teams use TypeScript. Since setValue is public it appears as though it is intended for direct use by said consuming teams.

Impact

This misunderstanding may cause improper usage patterns and bypasses the intended abstractions we've designed for managing state and interactions within form control elements.

Proposed Solution

Changing setValue from a public method to a protected method would be ideal on our end. However, I understand this might not be ideal on your end. We're open to other potential solutions as well.

When I submit a <form/>, I'd like to know which element submitted the form.
In native HTML, I have access to the element that submitted the form via event.submitter

Read more about the event.submitter spec here

Example:

// JS
document
    .querySelector("form")
    .addEventListener("submit", (event) => {
        let submitter = event.submitter;
    });

// HTML
<form>
    <button name='FirstButton' value='FirstValue'>First</button>
    <button name='SecondButton' value='SecondValue'>Second</button>
</form>

Expected:
event.submitter should be a reference to the DOM node

Received:
event.submitter is null

The calls to addEventListeners in the element's constructor break Lit SSR compatibility.

Could these be moved to the connectedCallback?

connectedCallback() {
  super.connectedCallback();

  this.addEventListener?.('focus', this.#onFocus);
  this.addEventListener?.('blur', this.#onBlur);
  this.addEventListener?.('invalid', this.#onInvalid);
}

Alternatively, perhaps provide a method we can override to inform the mixin if it is being rendered on a server at the moment but in a library agnostic way:

protected isServer() {
  return false;
}

constructor(...args: any[]) {
  super(...args);

  if (!this.isServer()) {
    this.addEventListener?.('focus', this.#onFocus);
    this.addEventListener?.('blur', this.#onBlur);
    this.addEventListener?.('invalid', this.#onInvalid);
  }
  this.setValue(null);
}

So then in a Lit element we could just override:

import {isServer} from 'lit';

// ...

  protected isServer() {
    return isServer;
  }

i saw a example using formControlValidationGroup
now i checked the code and the history on formControlValidationGroup there was a pr from @calebdwilliams
but i dont think there is any current implementation using formControlValidationGroup was this intentionaly?

is there a work around for this so you can validate radio input groups?
if not ill see if i can help with a implemention to put it back in

it use to be added with this pr #12

i also see formValidationGroup still in there