feat(manager): implement multiple for on change

Author: rvsia

packages/form-state-manager/src/files/use-field.ts

@@ -107,13 +107,13 @@ const useField = ({
       sanitizedValue = finalClearedValue;
     }
 
-    if (type && type === 'checkbox') {
-      if (value) {
-        if (state?.value && Array.isArray(state.value)) {
-          sanitizedValue = state.value.includes(value) ? state.value.filter((v: any) => v !== value) : [...state.value, value];
-        } else {
-          sanitizedValue = [value];
-        }
+    if ((type && type === 'checkbox' && value) || multiple) {
+      const finalValue = value || sanitizedValue;
+
+      if (state?.value && Array.isArray(state.value)) {
+        sanitizedValue = state.value.includes(finalValue) ? state.value.filter((v: any) => v !== finalValue) : [...state.value, finalValue];
+      } else {
+        sanitizedValue = [finalValue];
       }
     }
 
@@ -164,6 +164,10 @@ const useField = ({
     valueToReturn = '';
   }
 
+  if (!valueToReturn && multiple) {
+    valueToReturn = [];
+  }
+
   return {
     input: {
       value: valueToReturn,

packages/form-state-manager/src/tests/files/use-field.test.js

@@ -1263,4 +1263,62 @@ describe('useField', () => {
       console.error = _consoleError;
     });
   });
+
+  describe('multiple', () => {
+    let Select;
+    let wrapper;
+
+    beforeEach(() => {
+      Select = (props) => {
+        const { input } = useField(props);
+        return (
+          <select {...input}>
+            <option value="dogs">Dogs</option>
+            <option value="cats">Cats</option>
+            <option value="hamsters">Hamsters</option>
+          </select>
+        );
+      };
+    });
+
+    it('select and deselect multiple', async () => {
+      wrapper = mount(
+        <FormManagerContext.Provider value={{ ...managerApi(), formOptions: managerApi }}>
+          <Select name="field" multiple />
+        </FormManagerContext.Provider>
+      );
+
+      expect(wrapper.find('select').props().value).toEqual([]);
+
+      await act(async () => {
+        wrapper
+          .find('option')
+          .first()
+          .simulate('change');
+      });
+      wrapper.update();
+
+      expect(wrapper.find('select').props().value).toEqual(['dogs']);
+
+      await act(async () => {
+        wrapper
+          .find('option')
+          .last()
+          .simulate('change');
+      });
+      wrapper.update();
+
+      expect(wrapper.find('select').props().value).toEqual(['dogs', 'hamsters']);
+
+      await act(async () => {
+        wrapper
+          .find('option')
+          .first()
+          .simulate('change');
+      });
+      wrapper.update();
+
+      expect(wrapper.find('select').props().value).toEqual(['hamsters']);
+    });
+  });
 });