fix(choice): use empty array as multiple choice initial value

Author: mdauner

jest.config.js

@@ -1,10 +1,12 @@
 module.exports = {
   transform: {
-    '^.+\\.js$': 'babel-jest',
+    '^.+\\.m?js$': 'babel-jest',
     '^.+\\.svelte$': 'jest-transform-svelte',
   },
-  transformIgnorePatterns: ['/node_modules/(?!lodash-es).+\\.js$'],
-  moduleFileExtensions: ['js', 'svelte'],
+  transformIgnorePatterns: [
+    '/node_modules/(?!(lodash-es|svelte-writable-derived)).+\\.m?js$',
+  ],
+  moduleFileExtensions: ['js', 'svelte', 'mjs'],
   roots: ['<rootDir>/tests'],
   bail: false,
   verbose: false,

package.json

@@ -52,7 +52,8 @@
     "yup": "0.27.0"
   },
   "dependencies": {
-    "lodash-es": "^4.17.15"
+    "lodash-es": "^4.17.15",
+    "svelte-writable-derived": "^2.0.1"
   },
   "scripts": {
     "prettier": "prettier --check '**/*.{svelte, html, css, scss, stylus, js, ts, json, yml, md}' --plugin-search-dir=.",

src/App.svelte

@@ -19,15 +19,6 @@
         user: { email: 'test@user.com' },
       });
     }, 2000);
-
-    /**
-     * {
-     *   email: 'email@example.com',
-     *   password: '123456',
-     *   language: 'svelte',
-     *   os: ['osx', 'linux']
-     * }
-     */
   }
 
   const schema = yup.object().shape({
@@ -38,7 +29,10 @@
         .email(),
       password: yup.string().min(4),
       language: yup.string().required(),
-      os: yup.string().required(),
+      os: yup
+        .array()
+        .of(yup.string().required())
+        .min(2),
     }),
   });
 
@@ -92,7 +86,7 @@
     placeholder="Password"
     multiline />
   <Select name="user.language" options={langOptions} />
-  <Choice name="user.os" options={osOptions} />
+  <Choice name="user.os" options={osOptions} multiple />
 
   <button type="reset">Reset</button>
   <button type="submit" disabled={isSubmitting}>Sign in</button>

src/components/Choice.svelte

@@ -1,17 +1,16 @@
 <script>
   import { getContext } from 'svelte';
   import get from 'lodash-es/get';
+  import set from 'lodash-es/set';
+  import writableDerived from 'svelte-writable-derived';
   import { FORM } from './Form.svelte';
 
   export let name;
   export let options;
   export let multiple = false;
 
-  let choiceValue = get($values, name, []);
-
   const {
     touchField,
-    setValue,
     validate,
     values,
     errors,
@@ -20,8 +19,13 @@
     validateOnChange,
   } = getContext(FORM);
 
+  const choice = writableDerived(
+    values,
+    $values => get($values, name, multiple ? [] : ''),
+    newValue => set($values, name, newValue)
+  );
+
   function onChange() {
-    setValue(name, choiceValue);
     touchField(name);
 
     if (validateOnChange) {
@@ -46,7 +50,7 @@
         {name}
         on:change={onChange}
         on:blur={onBlur}
-        bind:group={choiceValue}
+        bind:group={$choice}
         value={option.id} />
     {:else}
       <input
@@ -55,7 +59,7 @@
         {name}
         on:change={onChange}
         on:blur={onBlur}
-        bind:group={choiceValue}
+        bind:group={$choice}
         value={option.id} />
     {/if}
     {#if option.title}

src/components/Form.svelte

@@ -23,21 +23,24 @@
 
   let isValid;
   let form;
-  let fieldPaths;
+  let fields;
 
   onMount(() => {
-    fieldPaths = new Set(
-      Array.from(form.querySelectorAll('input,textarea,select'))
-        .map(el => el.name)
-        .filter(name => !!name)
-    );
-    fieldPaths.forEach(registerField);
-  });
+    fields = Array.from(form.querySelectorAll('input,textarea,select'))
+      .filter(el => !!el.name)
+      .map(el => ({ path: el.name }))
+      .reduce((allElements, currentElement) => {
+        const isCurrentElement = el => el.path === currentElement.path;
+        const multiple = !!allElements.find(isCurrentElement);
 
-  function registerField(path) {
-    $values = set($values, path, get(initialValues, path, ''));
-    $touched = set($touched, path, false);
-  }
+        return [
+          ...allElements.filter(el => !isCurrentElement(el)),
+          { ...currentElement, multiple },
+        ];
+      }, []);
+
+    resetForm();
+  });
 
   setContext(FORM, {
     touchField,
@@ -52,12 +55,17 @@
   });
 
   function resetForm(data) {
-    fieldPaths.forEach(path => {
-      $values = set($values, path, get(data ? data : initialValues, path, ''));
+    fields.forEach(({ path, multiple }) => {
+      $values = set(
+        $values,
+        path,
+        get(data ? data : initialValues, path, multiple ? [] : '')
+      );
       $touched = set($touched, path, false);
     });
     $errors = {};
     $validatedValues = {};
+    isValid = undefined;
   }
 
   async function validate() {
@@ -95,7 +103,7 @@
   }
 
   async function handleSubmit() {
-    fieldPaths.forEach(name => ($touched = set($touched, name, true)));
+    fields.forEach(({ path }) => ($touched = set($touched, path, true)));
     await validate();
     if (!schema || isValid) {
       $isSubmitting = true;

tests/Form/Form.spec.js

@@ -173,7 +173,7 @@ describe('Form', () => {
     expect(component.form.$$.ctx.$values).toMatchObject({
       user: { email: '' },
       language: '',
-      os: '',
+      os: [],
     });
     expect(component.form.$$.ctx.$touched).toMatchObject({
       user: { email: false },
@@ -195,7 +195,7 @@ describe('Form', () => {
     expect(component.form.$$.ctx.$values).toMatchObject({
       user: { email: 'test@user.com' },
       language: '',
-      os: '',
+      os: [],
     });
   });
 

tests/Form/__snapshots__/Form.spec.js.snap

@@ -124,7 +124,7 @@ Object {
 }
 `;
 
-exports[`Form onSubmit event returns values, resetForm, setSubmitting 3`] = `undefined`;
+exports[`Form onSubmit event returns values, resetForm, setSubmitting 3`] = `Object {}`;
 
 exports[`Form onSubmit event returns values, resetForm, setSubmitting 4`] = `
 Object {
@@ -139,7 +139,7 @@ Object {
 exports[`Form onSubmit event returns values, resetForm, setSubmitting 5`] = `
 Object {
   "language": "",
-  "os": "",
+  "os": Array [],
   "user": Object {
     "email": "",
   },

tests/Input/Input.spec.js

@@ -58,7 +58,7 @@ describe('Input', () => {
     });
     await wait();
 
-    expect(component.form.$$.ctx.$errors).toEqual(undefined);
+    expect(component.form.$$.ctx.$errors).toEqual({});
   });
 
   it('validates on blur if validateOnBlur is true', async () => {
@@ -97,7 +97,7 @@ describe('Input', () => {
     });
     await fireEvent.blur(emailInput);
     await wait();
-    expect(component.form.$$.ctx.$errors).toEqual(undefined);
+    expect(component.form.$$.ctx.$errors).toEqual({});
   });
 
   it('matches snapshot', async () => {

yarn.lock

@@ -8602,6 +8602,11 @@ svelte-preprocess@3.1.2:
     detect-indent "^6.0.0"
     strip-indent "^2.0.0"
 
+svelte-writable-derived@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/svelte-writable-derived/-/svelte-writable-derived-2.0.1.tgz#268165145bf44c9349b153381985516c76bf4a58"
+  integrity sha512-aQ0p4rpFjcfemh0mzXEzQcAbXCC9r8fnHo49Hlx/e14O2T44pJMYiuBwJcciGtDT+b8HRxikAS+DUdwJf3RIPw==
+
 svelte@3.12.1:
   version "3.12.1"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.12.1.tgz#ddfacd43272ac3255907c682b74ee7d3d8b06b0c"