🐛 - fix: fix issues regarding form state

Author: svenvandescheur

src/components/form/select/select.tsx

@@ -15,7 +15,7 @@ import {
   useTypeahead,
 } from "@floating-ui/react";
 import clsx from "clsx";
-import React, { useEffect } from "react";
+import React, { MouseEventHandler, useEffect } from "react";
 
 import { gettextFirst, ucFirst } from "../../../lib";
 import { Button } from "../../button";
@@ -167,59 +167,54 @@ export const Select: React.FC<SelectProps> = ({
 
   /**
    * Handles a change of the selected (option) index.
-   * @param event
+   * @param _
    * @param index
    */
-  const handleChange = (event: React.UIEvent, index: number | null) => {
-    if (index === null) {
-      setSelectedIndices([]);
-      setIsOpen(false);
-
-      /*
-       * Dispatch change event.
-       *
-       * A custom "change" event created with `detail` set to the selected option.
-       * The event is dispatched on `fakeInputRef.current` setting `target` to a
-       * native select (which in itself can be used to obtain the value without
-       * the use of events).
-       *
-       * This aims to improve compatibility with various approaches of dealing
-       * with forms.
-       *
-       * NOTE: Dispatching is delayed to allow React to `fakeInputRef.current`
-       * before dispatching.
-       */
-      const fakeInput = fakeInputRef.current as HTMLSelectElement;
-      const changeEvent = eventFactory("change", null, true, false, false);
-      fakeInput.dispatchEvent(changeEvent);
-      onChange?.(
-        changeEvent as unknown as React.ChangeEvent<HTMLSelectElement>,
-      );
-      return;
+  const handleChange = (_: React.UIEvent, index: number | null) => {
+    const selectedOption = index !== null ? options[index] : null;
+
+    // Multiple select, add/remove.
+    if (multiple && index !== null) {
+      const next = selectedIndices.includes(index)
+        ? selectedIndices.filter((i) => i !== index) // Remove
+        : [...selectedIndices, index]; // Add
+      setSelectedIndices(next);
     }
 
-    let next: number[];
-    if (multiple) {
-      next = selectedIndices.includes(index)
-        ? selectedIndices.filter((i) => i !== index)
-        : [...selectedIndices, index];
-      setIsOpen(true);
-    } else {
-      next = [index];
+    // Single
+    else {
+      setSelectedIndices(index !== null ? [index] : []); // To array.
       setIsOpen(false);
     }
 
-    setSelectedIndices(next);
-    const selectedOptions = next.map((i) => options[i]);
-    const detail = multiple ? selectedOptions : selectedOptions[0] || null;
-
+    /*
+     * Dispatch change event.
+     *
+     * A custom "change" event created with `detail` set to the selected option.
+     * The event is dispatched on `fakeInputRef.current` setting `target` to a
+     * native select (which in itself can be used to obtain the value without
+     * the use of events).
+     *
+     * This aims to improve compatibility with various approaches of dealing
+     * with forms.
+     *
+     * NOTE: Dispatching is delayed to allow React to `fakeInputRef.current`
+     * before dispatching.
+     */
     const fakeInput = fakeInputRef.current as HTMLSelectElement;
     setTimeout(() => {
-      const changeEvent = eventFactory("change", detail, true, false, false);
-      fakeInput.dispatchEvent(changeEvent);
-      onChange?.(
-        changeEvent as unknown as React.ChangeEvent<HTMLSelectElement>,
+      const changeEvent = eventFactory(
+        "change",
+        selectedOption,
+        true,
+        false,
+        false,
       );
+      fakeInput.dispatchEvent(changeEvent);
+      onChange &&
+        onChange(
+          changeEvent as unknown as React.ChangeEvent<HTMLSelectElement>,
+        );
     });
   };
 
@@ -228,7 +223,7 @@ export const Select: React.FC<SelectProps> = ({
     : selectedIndices[0] !== undefined && selectedIndices[0] !== null
       ? options[selectedIndices[0]].value
       : "";
-
+  const { onMouseDown, ...referenceProps } = getReferenceProps();
   return (
     <>
       <div
@@ -250,7 +245,15 @@ export const Select: React.FC<SelectProps> = ({
         aria-hidden={hidden}
         aria-disabled={disabled}
         onBlur={handleBlur}
-        {...getReferenceProps()}
+        {...referenceProps}
+        onMouseDown={(e) => {
+          const target = e.target as HTMLElement;
+          // Override floating ui behavior for remove/close buttons.
+          if (target.classList.contains("mykn-icon")) {
+            return;
+          }
+          (onMouseDown as MouseEventHandler)(e);
+        }}
         {...props}
       >
         {/* This is here for compatibility with native forms, as well as a providing a target for change events. */}
@@ -289,26 +292,7 @@ export const Select: React.FC<SelectProps> = ({
                       variant="transparent"
                       className="mykn-select__pill-remove"
                       aria-label={`Remove ${options[i]?.label}`}
-                      onClick={(e) => {
-                        e.stopPropagation(); // prevent dropdown from toggling
-                        const next = selectedIndices.filter((j) => j !== i);
-                        setSelectedIndices(next);
-
-                        const detail = next.map((j) => options[j]);
-
-                        const fakeInput = fakeInputRef.current!;
-                        const changeEvent = eventFactory(
-                          "change",
-                          detail,
-                          true,
-                          false,
-                          false,
-                        );
-                        fakeInput.dispatchEvent(changeEvent);
-                        onChange?.(
-                          changeEvent as unknown as React.ChangeEvent<HTMLSelectElement>,
-                        );
-                      }}
+                      onClick={(e) => handleChange(e, i)}
                     >
                       <Outline.XMarkIcon />
                     </Button>
@@ -326,26 +310,7 @@ export const Select: React.FC<SelectProps> = ({
             className="mykn-select__clear"
             type="button"
             aria-label={ucFirst(_labelClear)}
-            onClick={(e) => {
-              if (multiple) {
-                setSelectedIndices([]);
-                // fire a change with empty array detail
-                const fake = fakeInputRef.current!;
-                const changeEvent = eventFactory(
-                  "change",
-                  [],
-                  true,
-                  false,
-                  false,
-                );
-                fake.dispatchEvent(changeEvent);
-                onChange?.(
-                  changeEvent as unknown as React.ChangeEvent<HTMLSelectElement>,
-                );
-              } else {
-                handleChange(e, null);
-              }
-            }}
+            onClick={(e) => handleChange(e, null)}
           >
             <Outline.XCircleIcon />
           </button>