From 6455ef3596c4b27db8a46a7295197f79cf6f62d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Felix=20Be=C4=8Dei=C4=87?= <44879477+fbeceic@users.noreply.github.com> Date: Tue, 17 Dec 2024 14:45:34 +0100 Subject: [PATCH] #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 --- libs/formik-elements/src/SelectField.tsx | 9 ++++---- libs/selectors/src/Select.tsx | 22 +++++++++---------- .../formik-elements/SelectField.stories.tsx | 2 +- .../TreeSelectField.stories.tsx | 1 - storybook/src/selectors/Select.stories.tsx | 2 +- 5 files changed, 17 insertions(+), 19 deletions(-) diff --git a/libs/formik-elements/src/SelectField.tsx b/libs/formik-elements/src/SelectField.tsx index 162b8ba..26d03e5 100644 --- 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(value: T, arr: T[]) { } function SelectField({ name, getOptionValue, children, options, ...props }: SelectFieldProps) { - const formik = useFormikContext(); const [field, meta, helpers] = useField(name); const shouldValidate = useShouldValidate(); const initialError = useFormikBypass(name); @@ -63,11 +62,11 @@ function SelectField({ 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 index 7d41923..fa74fee 100644 --- 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({ const id = `input-${name}`; const isDisabled = disabled || loading; const hasOptions = options.length !== 0; + const hasValue = !isNil(value); const toggleRef = React.useRef(null); //used only for form submit on enter @@ -237,9 +239,9 @@ function Select({ 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({ } else { onChange([]); } - } else if (selectedItem) { + } else if (!isNil(selectedItem)) { onChange(selectedItem); } } else if (type === useSelect.stateChangeTypes.MenuBlur) { @@ -322,9 +324,7 @@ function Select({ }, [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({ ); 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({ 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({
{loading &&
{loadingIcon}
} {error && warningIcon} - {!disabled && value && !hideClearButton && !error && ( + {!disabled && hasValue && !hideClearButton && !error && ( )} -
- {(value || error || loading) &&
 
} +
+ {(hasValue || error || loading) &&
 
}
diff --git a/storybook/src/formik-elements/SelectField.stories.tsx b/storybook/src/formik-elements/SelectField.stories.tsx index 6464565..c61866b 100644 --- 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={} 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 index 9fab991..bcaadfa 100644 --- a/storybook/src/formik-elements/TreeSelectField.stories.tsx +++ b/storybook/src/formik-elements/TreeSelectField.stories.tsx @@ -116,7 +116,6 @@ export const WithValueLabel = () => ( ( <> {item.code} {item.name} diff --git a/storybook/src/selectors/Select.stories.tsx b/storybook/src/selectors/Select.stories.tsx index c6701aa..3f362c0 100644 --- a/storybook/src/selectors/Select.stories.tsx +++ b/storybook/src/selectors/Select.stories.tsx @@ -212,7 +212,7 @@ export const DisabledItems = () => ( {...commonProps} label={} isItemDisabled={(item: Item) => { - return item.name === "Pero"; + return item.name === "Matthew" || item.name === "John"; }} /> );