The solar-forms from kajetansw

Deselection of text input inside <Show>

Hey, so pretty simple issue if you have a form like this

<Show when={true}>
    <form use:formGroup={fg}>
        <input type="text" formControlName="email" /> 
     </form>
</Show>

Essentially, the input field gets deselected every time you input a character.
Here is a repo with an example.

A quick discussion on the Solid-js Discord found that the issue is with solid-js@>1.4.7 in the playground, the Repo uses [email protected]
Breaks
Works

Maybe you can shed some light on it ?

Form field validations do not work if nested in other elements or in other components.

Thanks for creating this library. While testing I have come across a couple of related issues.

Form fields do not work if nested in other elements

e.g. An input in a div will not be seen by the formGroup function.

<form use:formGroup={fg}>
  <div>
    <input type="email" formControlName="email" />
  <div>
</form>

This was solved by adding a couple of lines to the bottom of the formGroup function to recurse through elements...

export function formGroup<I extends CreateFormGroupInput>(el: Element, formGroupSignal: () => FormGroup<I>) {
  for (const $child of el.children) {
    const formGroupName = getFormGroupName($child);
    if (formGroupName) {
      // Handle nested form groups
      formGroup($child, toNestedFormGroupSignal(formGroupSignal, formGroupName));
    } else {
      const $formControl = getFormControl($child);

      if ($formControl instanceof HTMLInputElement) {
        formGroupForInput($formControl, formGroupSignal);
      } else if ($formControl instanceof HTMLSelectElement) {
        formGroupForSelect($formControl, formGroupSignal);
      } else if ($formControl instanceof HTMLTextAreaElement) {
        formGroupForTextArea($formControl, formGroupSignal);
      } else if ($formControl == null && $child instanceof Element && $child.children.length > 0) {
        // Handle nested elements
        formGroup($child, formGroupSignal);
      }
    }
  }
}

Form fields do not work if nested in custom Solid components.

e.g.

<form use:formGroup={fg}>
    <MyFields />
</form>

function MyFields() {
  return (
    <input type="email" formControlName="email" />
  )
}

Even with the above patch this does not work because formGroup is being used as a directive. It gets executed when the form element is created but before the MyFields elements exist (or at least that's my understanding). I was able to work around this by not using formGroup as a directive but instead calling it from onMount with a ref to the form.

let formRef;

onMount(() => {
  formGroup(formRef, () => fg)
})

return (
  <form ref={formRef}>
    <MyFields />
  </form>
)

Maybe worth mentioning in the docs if there isn't a better solution?

kajetansw / solar-forms Goto Github PK

solar-forms's People

Contributors

Stargazers

Watchers

solar-forms's Issues

Deselection of text input inside <Show>

Form field validations do not work if nested in other elements or in other components.

Form fields do not work if nested in other elements

Form fields do not work if nested in custom Solid components.

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent