update the example to have description in the drop down

Author: dwjohnston

src/lib/Autocomplete_B/Autocomplete.stories.tsx

@@ -34,23 +34,28 @@ type Story = StoryObj<typeof meta>;
 const todos = [
     {
         id: "1",
-        name: "Foo"
+        name: "Foo",
+        description: "This is foo"
     },
     {
         id: "2",
-        name: "Food"
+        name: "Food",
+        description: "This is food"
     },
     {
         id: "3",
-        name: "Bar"
+        name: "Bar",
+        description: "This is bar"
     },
     {
         id: "4",
-        name: "Nice Long text"
+        name: "Nice Long text",
+        description: "This is nice long text"
     },
     {
         id: "5",
-        name: "Nice long text two three four"
+        name: "Nice long text two three four",
+        description: "This is nice long text two three four"
     },
 
 ]
@@ -59,6 +64,7 @@ const todos = [
 type Todo = {
     id: string;
     name: string;
+    description: string;
 }
 
 async function searchFn(searchTerm: string, pageNumber: number) {
@@ -92,7 +98,7 @@ export const Main: Story = {
             return <div>{v.name}</div>
         },
         itemKey: "id",
-        valuePrettyNameFn: (item: Todo) => item.name,
+        selectedValueDisplayStringFn: (item: Todo) => item.name,
 
     },
     parameters: {
@@ -106,10 +112,9 @@ export function Interactive() {
         <div>
             <Autocomplete
                 searchFn={searchFn}
-                renderItem={(item) => <div>{item.name}</div>}
+                renderItem={(item) => <div>{item.name} - {item.description}</div>}
                 itemKey="id"
-                valuePrettyNameFn={(item) => item.name}
-
+                selectedValueDisplayStringFn={(item) => item.name}
             />
         </div>
     );
@@ -123,7 +128,7 @@ export const TestUserSearchesWithNoResults: Story = {
             return <div>{v.name}</div>
         },
         itemKey: "id",
-        valuePrettyNameFn: (item: Todo) => item.name,
+        selectedValueDisplayStringFn: (item: Todo) => item.name,
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
@@ -158,7 +163,7 @@ export const TestUserSearchesWithResultsThenNoResults: Story = {
             return <div>{v.name}</div>
         },
         itemKey: "id",
-        valuePrettyNameFn: (item: Todo) => item.name,
+        selectedValueDisplayStringFn: (item: Todo) => item.name,
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);

src/lib/Autocomplete_B/Autocomplete.test.tsx

@@ -64,6 +64,7 @@ describe('Autocomplete', () => {
                     renderItem={(item: TestItem) => <div>{item.name} - {item.description}</div>}
                     itemKey="id"
                     onSelectValue={vi.fn()}
+                    selectedValueDisplayStringFn={(item: TestItem) => item.name}
                 />
             );
 
@@ -118,6 +119,7 @@ describe('Autocomplete', () => {
                     renderItem={(item: TestItem) => <div>{item.name} - {item.description}</div>}
                     itemKey="id"
                     onSelectValue={vi.fn()}
+                    selectedValueDisplayStringFn={(item: TestItem) => item.name}
                 />
             );
 
@@ -166,6 +168,7 @@ describe('Autocomplete', () => {
                     renderItem={(item: TestItem) => <div>{item.name} - {item.description}</div>}
                     itemKey="id"
                     onSelectValue={vi.fn()}
+                    selectedValueDisplayStringFn={(item: TestItem) => item.name}
                 />
             );
 
@@ -206,7 +209,7 @@ describe('Autocomplete', () => {
                     renderItem={(item: TestItem) => <div>{item.name} - {item.description}</div>}
                     itemKey="id"
                     onSelectValue={onSelectValue}
-                    valuePrettyNameFn={(item: TestItem) => item.name}
+                    selectedValueDisplayStringFn={(item: TestItem) => item.name}
                 />
             );
 

src/lib/Autocomplete_B/Autocomplete.tsx

@@ -20,19 +20,19 @@ export type AutocompleteProps<T extends Record<string, unknown>, TKey extends ke
   onSelectValue?: (itemKey: TKey, itemValue: T) => void;
 
   /**
-   * When an item is selected, we need a pretty name to show in the input box
+   * When an item is selected, this function is used to determine what string appears in the input box. 
    * @param item 
    * @returns 
    */
-  valuePrettyNameFn: (item: T) => string;
+  selectedValueDisplayStringFn: (item: T) => string;
 };
 
 export function Autocomplete<T extends Record<string, unknown>, TKey extends keyof T>({
   searchFn,
   renderItem,
   itemKey,
   onSelectValue,
-  valuePrettyNameFn
+  selectedValueDisplayStringFn
 }: AutocompleteProps<T, TKey>) {
 
 
@@ -61,7 +61,7 @@ export function Autocomplete<T extends Record<string, unknown>, TKey extends key
   const handleItemSelect = (item: T, index: number) => {
     setHighlightedIndex(index);
 
-    const prettyName = valuePrettyNameFn(item);
+    const prettyName = selectedValueDisplayStringFn(item);
     inputRef.current!.value = prettyName;
     setSearchTerm("");
     setItems([])