Merge pull request #220 from nada-deriv/nada/dropdown-fixes

Nada/fix: clear field value when list changes
deriv-com · Jun 25, 2024 · 3117ae0 · 3117ae0
2 parents a475e01 + d269d38
commit 3117ae0
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 30 deletions.
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
@@ -1,41 +1,44 @@
 import React, {
-    isValidElement,
     HtmlHTMLAttributes,
+    isValidElement,
     useCallback,
     useEffect,
     useState,
 } from "react";
 import clsx from "clsx";
 import { useCombobox } from "downshift";
+import "./Dropdown.scss";
+import { Input } from "../Input";
 import { TGenericSizes } from "../../types";
 import { Text } from "../Text";
-import { Input } from "../Input/index";
-import "./Dropdown.scss";
 
 type InputProps = React.ComponentProps<typeof Input>;
 type TProps = HtmlHTMLAttributes<HTMLInputElement> & {
     disabled?: boolean;
     dropdownIcon: React.ReactNode;
+    emptyResultMessage?: string;
     errorMessage?: InputProps["message"];
     icon?: React.ReactNode;
-    isRequired?: boolean;
     isFullWidth?: boolean;
+    isRequired?: boolean;
     label?: InputProps["label"];
     list: {
-        text?: React.ReactNode;
+        text?: string | JSX.Element;
         value?: string;
     }[];
     listHeight?: Extract<TGenericSizes, "lg" | "md" | "sm" | "xs">;
     name: InputProps["name"];
     onSearch?: (inputValue: string) => void;
     onSelect: (value: string) => void;
+    shouldClearValue?: boolean;
     value?: InputProps["value"];
     variant?: "comboBox" | "prompt";
 };
 
 export const Dropdown = ({
     disabled,
     dropdownIcon,
+    emptyResultMessage = "",
     errorMessage,
     icon = false,
     isFullWidth = false,
@@ -45,6 +48,7 @@ export const Dropdown = ({
     name,
     onSearch,
     onSelect,
+    shouldClearValue = false,
     value,
     variant = "prompt",
     ...rest
@@ -78,6 +82,7 @@ export const Dropdown = ({
         getToggleButtonProps,
         isOpen,
         openMenu,
+        setInputValue,
     } = useCombobox({
         defaultSelectedItem: items.find((item) => item.value === value) ?? null,
         items,
@@ -97,8 +102,8 @@ export const Dropdown = ({
             }
         },
         onIsOpenChange({ isOpen }) {
-            if (!isOpen) {
-                clearFilter();
+            if (!isOpen && !emptyResultMessage) {
+                clearFilter();  
             }
         },
         onSelectedItemChange({ selectedItem }) {
@@ -132,6 +137,16 @@ export const Dropdown = ({
 
     useEffect(() => {
         setItems(list);
+        if (
+            shouldClearValue &&
+            !list.some((item) => item.text === getInputProps().value)
+        ) {
+            const result = value
+                ? list.find((item) => item.value && item.value === value)?.text
+                : "";
+            setInputValue(reactNodeToString(result) ?? "");
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [list]);
 
     return (
@@ -144,13 +159,13 @@ export const Dropdown = ({
             <div className="deriv-dropdown__content">
                 <Input
                     disabled={disabled}
-                    message={errorMessage}
                     label={reactNodeToString(label)}
+                    leftPlaceholder={icon || undefined}
+                    message={errorMessage}
                     name={name}
                     onClickCapture={handleInputClick}
                     onKeyUp={() => setShouldFilterList(true)}
                     readOnly={variant !== "prompt"}
-                    leftPlaceholder={icon ? icon : undefined}
                     rightPlaceholder={<DropdownButton />}
                     type="text"
                     value={value}
@@ -169,26 +184,34 @@ export const Dropdown = ({
                 {...getMenuProps()}
             >
                 {isOpen &&
-                    items.map((item, index) => (
-                        <li
-                            className={clsx("deriv-dropdown__item", {
-                                "deriv-dropdown__item--active":
-                                    value === item.value,
-                            })}
-                            key={item.value}
-                            onClick={() => clearFilter()}
-                            {...getItemProps({ index, item })}
-                        >
-                            <Text
-                                size="sm"
-                                weight={
-                                    value === item.value ? "bold" : "normal"
-                                }
-                            >
-                                {item.text}
-                            </Text>
-                        </li>
-                    ))}
+                    (items.length
+                        ? items.map((item, index) => (
+                              <li
+                                  className={clsx("deriv-dropdown__item", {
+                                      "deriv-dropdown__item--active":
+                                          value === item.value,
+                                  })}
+                                  key={item.value}
+                                  onClick={() => clearFilter()}
+                                  {...getItemProps({ index, item })}
+                              >
+                                  <Text
+                                      size="sm"
+                                      weight={
+                                          value === item.value
+                                              ? "bold"
+                                              : "normal"
+                                      }
+                                  >
+                                      {item.text}
+                                  </Text>
+                              </li>
+                          ))
+                        : emptyResultMessage && (
+                              <li className="deriv-dropdown__item">
+                                  <Text size="sm">{emptyResultMessage}</Text>
+                              </li>
+                          ))}
             </ul>
         </div>
     );

diff --git a/stories/Dropdown.stories.ts b/stories/Dropdown.stories.ts
@@ -18,7 +18,7 @@ const meta = {
         ],
         listHeight: "md",
         name: "dropdownName",
-        onChange: (inputValue: string) =>
+        onSearch: (inputValue: string) =>
             console.log(`Input value changed: ${inputValue}`),
         onSelect: (value: string) => console.log(`Selected value: ${value}`),
         value: "option1",
@@ -52,3 +52,18 @@ export const Prompt: Story = {
         label: "Choose an option",
     },
 };
+
+export const PromptNoResults: Story = {
+    name: "Prompt With No Search Results Message",
+    args: {
+        variant: "prompt",
+        list: [
+            { text: "Option A", value: "optionA" },
+            { text: "Option B", value: "optionB" },
+            { text: "Option C", value: "optionC" },
+        ],
+        label: "Choose an option",
+        emptyResultMessage: "No search results"
+    }
+
+}