Describe the bug removeValue clea

SolidJS Array Field removeValue bug about form HOT 2 CLOSED

alexvuka1 commented on May 28, 2024

SolidJS Array Field removeValue bug

from form.

Comments (2)

aadito123 commented on May 28, 2024 1

Sorry this took us a while. It seems the array fields have some issue with primitive type elements. This seems to extend to React, too.

https://stackblitz.com/edit/solid-vite-axp2zs?file=src%2Findex.tsx

Made some changes in your example to make it work. We'll likely rollout a fix to support primitive types though.

from form.

crutchcorn commented on May 28, 2024

Thanks for reporting this!

I noticed your syntax is a bit off from what 0.14 is expecting. This should fix that:

import { render } from 'solid-js/web';
import { createForm } from '@tanstack/solid-form';
import { Index, Show } from 'solid-js';

function Counter() {
  const form = createForm(() => ({
    defaultValues: {
      names: ['1', '2', '3'] as string[],
    },
  }));

  return (
    <>
      <form>
        <form.Field
          name="names"
          mode="array"
          children={(namesField) => (
            <div>
              Names
              <div>
                <Show when={namesField().state.value.length > 0}>
                  <Index each={namesField().state.value}>
                    {(_, i) => (
                      <form.Field name={`names[${i}]` as never}>
                        {(field) => {
                          return (
                            <div>
                              <label for={field().name}>Name:</label>
                              <input
                                id={field().name}
                                name={field().name}
                                value={field().state.value}
                                onBlur={field().handleBlur}
                                onInput={(e) =>
                                  field().handleChange(e.target.value as never)
                                }
                              />
                              <button
                                type="button"
                                onClick={() => namesField().removeValue(i)}
                              >
                                X
                              </button>
                            </div>
                          );
                        }}
                      </form.Field>
                    )}
                  </Index>
                </Show>
              </div>
              <button type="button" onClick={() => namesField().pushValue('')}>
                Add name
              </button>
            </div>
          )}
        />
      </form>
    </>
  );
}

render(() => <Counter />, document.getElementById('app')!);