lion form error when wrapped as react component with @lit/react

[nbamfordcirium]

I am unable to use lion forms/form components when they are wrapped with the @lit/react package.

As far as I can tell from observing other lion components wrapped this way, either the lit library or react itself instantiates the web controls before setting any attributes, then attributes are set in a later render pass.

Unfortunately, instantiating the form components runs into the following check in form-core/registration/FormRegistrarMixin.js on line 159:

/**
     * @param {FormControl} child the child element (field)
     * @param {number} indexToInsertAt index to insert the form element at
     */
    addFormElement(child, indexToInsertAt) {
      // This is a way to let the child element (a lion-fieldset or lion-field) know, about its parent
      // eslint-disable-next-line no-param-reassign
      child._parentFormGroup = /** @type {* & FormRegistrarHost} */ (this);

      // 1. Add children as array element
      if (indexToInsertAt >= 0) {
        this.formElements.splice(indexToInsertAt, 0, child);
      } else {
        this.formElements.push(child);
      }

      // 2. Add children as object key
      if (this._isFormOrFieldset) {
        const { name } = child;
        if (name === this.name) {
          console.info('Error Node:', child); // eslint-disable-line no-console
          throw new TypeError(`You can not have the same name "${name}" as your parent`);
        }
...

Because the name attribute has yet to be set, both the form and the registering component have a name value of "" and the error is thrown.

I'm assuming this is expected behavior, but has anyone else seen this? Is there any type of workaround you could suggest?

Thanks

[nbamfordcirium]

fwiw, here's how I worked around it by overriding addCustomElement in my form class:

 override addFormElement(
    child: HTMLElement & ElementWithParentFormGroup,
    indexToInsertAt: number,
  ) {
    if (!child.hasAttribute('name'))
      child.setAttribute(
        'name',
        `ev-form-control-${this.formElements?.length || '0'}`,
      );
    super.addFormElement(child, indexToInsertAt);
  }

Later, React gets around to updating the name to what was set in the component's attributes, but then I ran into another problem-- when the form is submitted, it reports the initial element names I shoehorned in in addFormElement.

For reasons that quite frankly escape me, I think having to do with the mismatch between React updates and the web component lifecycle methods, the name change is never visible to the form, and hence formElements has the original name as the key for the element.

I was able to work around this by overriding FormControlMixin and dispatching the custom form-element-name-changed event like so:

override attributeChangedCallback(
        name: string,
        _old: string | null,
        value: string | null,
      ): void {
        super.attributeChangedCallback(name, _old, value);
        // Only dispatch event if existing name has changed
        if (name === 'name' && _old)
          this.dispatchEvent(
            new CustomEvent('form-element-name-changed', {
              detail: {
                oldName: _old,
                newName: this.name,
              },
              bubbles: true,
            }),
          );
      }

I didn't enjoy doing any of this, and I hope React's supposedly just-around-the-corner native web component support obviates the need for it, but...