Merge pull request #37 from abusix/pla-650-support-undefined-values-i…

…n-single-combox BREAKING CHANGE: The combobox display value changed to function
abusix · Sep 15, 2023 · 21462b9 · 21462b9
2 parents ab0c248 + b5a86f9
commit 21462b9
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 8 deletions.
diff --git a/src/components/form-field/single-combobox/single-combobox-input.tsx b/src/components/form-field/single-combobox/single-combobox-input.tsx
@@ -2,28 +2,28 @@ import { Combobox as HeadlessCombobox } from "@headlessui/react";
 import React from "react";
 import { CaretDownIcon } from "../../../icons";
 
-export interface SingleComboboxInputProps {
+export interface SingleComboboxInputProps<TValue> {
     id: string;
-    displayValue: string;
+    displayValue?(item: TValue): string;
     placeholder: string;
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     showButton?: boolean;
 }
 
-export const SingleComboboxInput = ({
+export const SingleComboboxInput = <TValue,>({
     id,
     displayValue,
     placeholder,
     onChange,
     showButton = true,
-}: SingleComboboxInputProps) => {
+}: SingleComboboxInputProps<TValue>) => {
     return (
         <div className="relative">
             <HeadlessCombobox.Input
                 id={id}
                 name={id}
                 placeholder={placeholder}
-                displayValue={() => displayValue}
+                displayValue={displayValue}
                 onChange={onChange}
                 className="paragraph-100 flex h-8 w-full items-center rounded border border-neutral-400 py-2 pl-3 pr-8 focus-visible:border-primary-400 focus-visible:ring-2 focus-visible:ring-primary-200 disabled:bg-neutral-100 disabled:text-neutral-600 disabled:border-neutral-300"
             />

diff --git a/src/components/form-field/single-combobox/single-combobox.stories.tsx b/src/components/form-field/single-combobox/single-combobox.stories.tsx
@@ -42,7 +42,6 @@ const SingleComboboxWithHooks = () => {
         >
             <SingleCombobox.Input
                 id="value"
-                displayValue={selectedPerson}
                 placeholder="Select person..."
                 onChange={(event) => setQuery(event.target.value)}
             />
@@ -64,6 +63,56 @@ const SingleComboboxWithHooks = () => {
     );
 };
 
+interface Person {
+    id: number;
+    name: string;
+    short: string;
+}
+
+const peopleObjects: Person[] = [
+    { id: 1, name: "Durward Reynolds", short: "Durward" },
+    { id: 2, name: "Kenton Towne", short: "Kenton" },
+    { id: 3, name: "Therese Wunsch", short: "Therese" },
+    { id: 4, name: "Benedict Kessler", short: "Benedict" },
+    { id: 5, name: "Katelyn Rohan", short: "Katelyn" },
+];
+
+const SingleComboboxObjectValueWithHooks = () => {
+    const [selectedPerson, setSelectedPerson] = React.useState<Person>();
+    const [query, setQuery] = React.useState("");
+
+    const filteredPeople =
+        query === ""
+            ? peopleObjects
+            : peopleObjects.filter((person) => {
+                  return person.name.toLowerCase().includes(query.toLowerCase());
+              });
+
+    return (
+        <FormField.SingleCombobox
+            value={selectedPerson}
+            onChange={(value) => {
+                setQuery("");
+                setSelectedPerson(value);
+            }}
+        >
+            <SingleCombobox.Input
+                id="value"
+                placeholder="Select person..."
+                displayValue={(person: Person) => person.name}
+                onChange={(event) => setQuery(event.target.value)}
+            />
+            <FormField.SingleCombobox.Options>
+                {filteredPeople.map((person) => (
+                    <FormField.SingleCombobox.Option key={person.id} value={person}>
+                        <Tag>{person.short}</Tag>
+                    </FormField.SingleCombobox.Option>
+                ))}
+            </FormField.SingleCombobox.Options>
+        </FormField.SingleCombobox>
+    );
+};
+
 const SingleComboboxCustomValueWithHooks = () => {
     const [selectedPerson, setSelectedPerson] = React.useState<string>("");
     const [query, setQuery] = React.useState("");
@@ -85,7 +134,6 @@ const SingleComboboxCustomValueWithHooks = () => {
         >
             <SingleCombobox.Input
                 id="value"
-                displayValue={selectedPerson}
                 placeholder="Select person..."
                 onChange={(event) => setQuery(event.target.value)}
             />
@@ -114,6 +162,14 @@ export const Default: Story = {
     ),
 };
 
+export const ObjectValue: Story = {
+    render: () => (
+        <div className="w-72">
+            <SingleComboboxObjectValueWithHooks />
+        </div>
+    ),
+};
+
 export const CustomValue: Story = {
     render: () => (
         <div className="w-72">

diff --git a/src/components/form-field/single-combobox/single-combobox.tsx b/src/components/form-field/single-combobox/single-combobox.tsx
@@ -8,7 +8,7 @@ import { SingleComboboxCustomOption } from "./single-combobox-custom-option";
 import { SingleComboboxEmptyOption } from "./single-combobox-empty-option";
 
 export interface SingleComboboxProps<TValue> {
-    value: TValue;
+    value?: TValue;
     onChange: (value: TValue) => void;
     children: React.ReactNode;
     disabled?: boolean;