#291 Fix Select(Field) not working with 0 value (#292)

* #291 Fix `Select(Field)` not working with 0 value * Remove test story * Fix story * Add lodash isNil check instead of value != null --------- Co-authored-by: Felix Beceic <[email protected]>
croz-ltd · Dec 17, 2024 · 6455ef3 · 6455ef3
1 parent ddcd4e8
commit 6455ef3
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 19 deletions.
diff --git a/libs/formik-elements/src/SelectField.tsx b/libs/formik-elements/src/SelectField.tsx
@@ -17,8 +17,8 @@
 
 import React from "react";
 
-import { useField, useFormikContext } from "formik";
-import { isEqual } from "lodash";
+import { useField } from "formik";
+import { isEqual, isNil } from "lodash";
 
 import { Select, SelectProps } from "@tiller-ds/selectors";
 import useShouldValidate from "./useShouldValidate";
@@ -43,7 +43,6 @@ function find<T>(value: T, arr: T[]) {
 }
 
 function SelectField<T>({ name, getOptionValue, children, options, ...props }: SelectFieldProps<T>) {
-  const formik = useFormikContext();
   const [field, meta, helpers] = useField(name);
   const shouldValidate = useShouldValidate();
   const initialError = useFormikBypass(name);
@@ -63,11 +62,11 @@ function SelectField<T>({ name, getOptionValue, children, options, ...props }: S
   const value = field.value && (Array.isArray(field.value) ? field.value.map(optionFn) : optionFn(field.value));
 
   const onChange = (item: T | T[] | undefined) => {
-    if (item) {
+    if (!isNil(item)) {
       if (Array.isArray(item)) {
         helpers.setValue(item.map(valueFn), shouldValidate);
       } else {
-        helpers.setValue(item && valueFn(item), shouldValidate);
+        helpers.setValue(valueFn(item), shouldValidate);
       }
     } else {
       helpers.setTouched(true, shouldValidate);

diff --git a/libs/selectors/src/Select.tsx b/libs/selectors/src/Select.tsx
@@ -18,8 +18,9 @@
 import * as React from "react";
 
 import { useSelect, UseSelectStateChangeTypes } from "downshift";
-import Popover, { positionMatchWidth } from "@reach/popover";
+import { isNil } from "lodash";
 
+import Popover, { positionMatchWidth } from "@reach/popover";
 import { Field } from "@tiller-ds/form-elements";
 import { useLabel } from "@tiller-ds/intl";
 import { ComponentTokens, cx, useIcon, useTokens } from "@tiller-ds/theme";
@@ -197,6 +198,7 @@ function Select<T>({
   const id = `input-${name}`;
   const isDisabled = disabled || loading;
   const hasOptions = options.length !== 0;
+  const hasValue = !isNil(value);
 
   const toggleRef = React.useRef<HTMLButtonElement>(null);
   //used only for form submit on enter
@@ -237,9 +239,9 @@ function Select<T>({
 
       if (selectionTypes.indexOf(type) !== -1 || type === useSelect.stateChangeTypes.FunctionReset) {
         if (allowMultiple) {
-          const currentValue = value && Array.isArray(value) ? [...value] : [];
+          const currentValue = hasValue && Array.isArray(value) ? [...value] : [];
 
-          if (selectedItem) {
+          if (!isNil(selectedItem)) {
             const index = currentValue.indexOf(selectedItem);
 
             if (index === -1) {
@@ -252,7 +254,7 @@ function Select<T>({
           } else {
             onChange([]);
           }
-        } else if (selectedItem) {
+        } else if (!isNil(selectedItem)) {
           onChange(selectedItem);
         }
       } else if (type === useSelect.stateChangeTypes.MenuBlur) {
@@ -322,9 +324,7 @@ function Select<T>({
   }, [isOpen]);
 
   const defaultFn = (item: T) => (typeof item === "string" ? item : item["label"]);
-  const defaultIsItemDisabledFn = () => false;
   const optionLabelFn = getOptionLabel || children || defaultFn;
-  const isItemDisabledFn = isItemDisabled || defaultIsItemDisabledFn;
 
   const noResultsText = useLabel("selectNoResults", "No results");
   const placeholderElement = (
@@ -333,7 +333,7 @@ function Select<T>({
     </div>
   );
   const singleOptionLabelFn = (singleValue?: T | null) =>
-    singleValue ? optionLabelFn(singleValue) : placeholderElement;
+    !isNil(singleValue) ? optionLabelFn(singleValue) : placeholderElement;
   const selectedFn = (array: T[]) =>
     getMultipleSelectedLabel ? getMultipleSelectedLabel(array) : `${array.length} selected`;
   const arrayLabelFn = (array: T[]) => (array.length <= 1 ? singleOptionLabelFn(array[0]) : selectedFn(array));
@@ -360,7 +360,7 @@ function Select<T>({
 
   const SelectItem = ({ option, index }: { option: T; index: number }) => {
     let element = optionLabelFn(option);
-    const isDisabled = isItemDisabledFn(option);
+    const isDisabled = Boolean(isItemDisabled && isItemDisabled(option));
     const itemProps = !isDisabled && { ...getItemProps({ item: option, index }) };
 
     const itemClassName = (selected: boolean) =>
@@ -432,13 +432,13 @@ function Select<T>({
             <div className={tokens.Loading.container}>
               {loading && <div className={loadingInnerClassName}>{loadingIcon}</div>}
               {error && warningIcon}
-              {!disabled && value && !hideClearButton && !error && (
+              {!disabled && hasValue && !hideClearButton && !error && (
                 <button type="button" className={clearClassName} onClick={clear}>
                   {removeIcon}
                 </button>
               )}
-              <div className={value || error || loading ? tokens.Separator.container : undefined}>
-                {(value || error || loading) && <div className={tokens.Separator.inner}>&nbsp;</div>}
+              <div className={hasValue || error || loading ? tokens.Separator.container : undefined}>
+                {(hasValue || error || loading) && <div className={tokens.Separator.inner}>&nbsp;</div>}
               </div>
             </div>
           </div>

diff --git a/storybook/src/formik-elements/SelectField.stories.tsx b/storybook/src/formik-elements/SelectField.stories.tsx
@@ -226,7 +226,7 @@ export const DisabledItems = () => (
     {...commonProps}
     label={<Intl name="label" />}
     isItemDisabled={(item: Item) => {
-      return item.name === "Pero";
+      return item.name === "Matthew" || item.name === "John";
     }}
   />
 );

diff --git a/storybook/src/formik-elements/TreeSelectField.stories.tsx b/storybook/src/formik-elements/TreeSelectField.stories.tsx
@@ -116,7 +116,6 @@ export const WithValueLabel = () => (
   <TreeSelectField
     {...commonProps}
     name="nameWithTreeItem"
-    disabled
     getValueLabel={(item) => (
       <>
         {item.code} {item.name}

diff --git a/storybook/src/selectors/Select.stories.tsx b/storybook/src/selectors/Select.stories.tsx
@@ -212,7 +212,7 @@ export const DisabledItems = () => (
     {...commonProps}
     label={<Intl name="label" />}
     isItemDisabled={(item: Item) => {
-      return item.name === "Pero";
+      return item.name === "Matthew" || item.name === "John";
     }}
   />
 );