feat: Added searchValue and onSearchValueChange props on SearchSelect (…

…#944) (#958)

* Adds searchValue and onSearchValueChange props

---------

Co-authored-by: Perry Raskin <[email protected]>

.gitignore

@@ -3,4 +3,5 @@ dist
 .DS_Store
 storybook-static
 package-lock.json
-.vscode
+.vscode
+yarn.lock

src/components/input-elements/SearchSelect/SearchSelect.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { isValidElement, useMemo, useRef, useState } from "react";
+import React, { isValidElement, useMemo, useRef } from "react";
 import { useInternalState } from "hooks";
 import { Combobox, Transition } from "@headlessui/react";
 import { ArrowDownHeadIcon, XCircleIcon } from "assets";
@@ -16,6 +16,8 @@ const makeSearchSelectClassName = makeClassName("SearchSelect");
 export interface SearchSelectProps extends React.HTMLAttributes<HTMLInputElement> {
   defaultValue?: string;
   name?: string;
+  searchValue?: string;
+  onSearchValueChange?: (value: string) => void;
   value?: string;
   onValueChange?: (value: string) => void;
   placeholder?: string;
@@ -33,6 +35,8 @@ const makeSelectClassName = makeClassName("SearchSelect");
 const SearchSelect = React.forwardRef<HTMLInputElement, SearchSelectProps>((props, ref) => {
   const {
     defaultValue = "",
+    searchValue,
+    onSearchValueChange,
     value,
     onValueChange,
     placeholder = "Select...",
@@ -50,7 +54,7 @@ const SearchSelect = React.forwardRef<HTMLInputElement, SearchSelectProps>((prop
   } = props;
   const comboboxButtonRef = useRef<HTMLButtonElement | null>(null);
 
-  const [searchQuery, setSearchQuery] = useState("");
+  const [searchQuery, setSearchQuery] = useInternalState("", searchValue);
   const [selectedValue, setSelectedValue] = useInternalState(defaultValue, value);
 
   const Icon = icon;
@@ -62,14 +66,15 @@ const SearchSelect = React.forwardRef<HTMLInputElement, SearchSelectProps>((prop
   }, [children]);
 
   const filteredOptions = useMemo(
-    () => getFilteredOptions(searchQuery, reactElementChildren),
+    () => getFilteredOptions(searchQuery ?? "", reactElementChildren),
     [searchQuery, reactElementChildren],
   );
 
   const handleReset = () => {
     setSelectedValue("");
     setSearchQuery("");
     onValueChange?.("");
+    onSearchValueChange?.("");
   };
 
   return (
@@ -166,7 +171,10 @@ const SearchSelect = React.forwardRef<HTMLInputElement, SearchSelectProps>((prop
                   getSelectButtonColors(hasValue(value), disabled),
                 )}
                 placeholder={placeholder}
-                onChange={(event) => setSearchQuery(event.target.value)}
+                onChange={(event) => {
+                  onSearchValueChange?.(event.target.value);
+                  setSearchQuery(event.target.value);
+                }}
                 displayValue={(value: string) => valueToNameMapping.get(value) ?? ""}
               />
               <div className={tremorTwMerge("absolute inset-y-0 right-0 flex items-center pr-2.5")}>

src/stories/input-elements/SearchSelect.stories.tsx

@@ -6,6 +6,7 @@ import {
   SimpleSearchSelectControlled,
   SimpleSearchSelectWithStaticAndDynamicChildren,
   SimpleSearchSelectForm,
+  SimpleSearchSelectServerSideRendering,
 } from "./helpers/SimpleSearchSelect";
 
 import { CalendarIcon } from "assets";
@@ -84,3 +85,10 @@ export const Form: Story = {
     required: true,
   },
 };
+
+export const ServerSideRendering: Story = {
+  render: SimpleSearchSelectServerSideRendering,
+  args: {
+    required: true,
+  },
+};

src/stories/input-elements/helpers/SimpleSearchSelect.tsx

@@ -97,3 +97,58 @@ export function SimpleSearchSelectControlled() {
     </div>
   );
 }
+
+export function SimpleSearchSelectServerSideRendering() {
+  const [searchQuery, setSearchQuery] = React.useState("");
+
+  interface User {
+    id: number;
+    name: string;
+    email: string;
+  }
+  const [options, setOptions] = React.useState<User[]>([]);
+
+  const [value, setValue] = React.useState<string>();
+
+  const handleSearchQueryChange = (query: string) => {
+    setSearchQuery(query);
+  };
+
+  const handleValueChange = (newValue: string) => {
+    setValue(newValue);
+  };
+
+  const handleReset = () => {
+    setValue("");
+  };
+
+  React.useEffect(() => {
+    if (searchQuery) {
+      fetch("https://jsonplaceholder.typicode.com/users")
+        .then((response) => response.json())
+        .then((data) => {
+          setOptions(data);
+        })
+        .catch((error) => console.error("Error fetching user data:", error));
+    }
+  }, [searchQuery]);
+
+  return (
+    <div className="space-y-4">
+      <SearchSelect
+        value={value}
+        onValueChange={handleValueChange}
+        searchValue={searchQuery}
+        onSearchValueChange={handleSearchQueryChange}
+      >
+        {options.map((option) => (
+          <SearchSelectItem key={option.id} value={option.id.toString()}>
+            {`${option.name} (${option.email})`}
+          </SearchSelectItem>
+        ))}
+      </SearchSelect>
+      <Button onClick={handleReset}>Reset</Button>
+      <p>Selected User ID: {value}</p>
+    </div>
+  );
+}