Merge pull request #261 from HospitalRun/typeahead-default-selected

fix(typeahead): add ability to set default value

src/components/Typeahead/Typeahead.tsx

@@ -10,6 +10,7 @@ interface Props {
   onSearch: (query: string) => Promise<any[]>
   minLength?: number
   placeholder?: string
+  value?: any
 }
 
 const Typeahead = (props: Props) => {
@@ -23,6 +24,7 @@ const Typeahead = (props: Props) => {
     onChange,
     renderMenuItemChildren,
     minLength,
+    value,
   } = props
 
   const search = async (query: string) => {
@@ -32,6 +34,11 @@ const Typeahead = (props: Props) => {
     setIsLoading(false)
   }
 
+  const selectedValues = []
+  if (value) {
+    selectedValues.push(value)
+  }
+
   return (
     <AsyncTypeahead
       id={id}
@@ -43,6 +50,7 @@ const Typeahead = (props: Props) => {
       onSearch={search}
       onChange={onChange}
       renderMenuItemChildren={renderMenuItemChildren}
+      defaultSelected={selectedValues}
     />
   )
 }

stories/typeahead.stories.tsx

@@ -48,4 +48,26 @@ storiesOf('Typeahead', module)
         )}
       />
     </div>
-  ))
+  )).add('Typeahead with default value', () => (
+    <div>
+      <Typeahead
+        id="typeahead"
+        searchAccessor="fullName"
+        placeholder="placeholder"
+        onSearch={() => getOptions()}
+        onChange={(selected) => alert(JSON.stringify(selected))}
+        value={{
+          id: '3',
+          firstName: 'first3',
+          lastName: 'last3',
+          fullName: 'first3 last3',
+        }}
+        renderMenuItemChildren={(option) => (
+          // eslint-disable-next-line
+            <div>
+              {`${option.fullName}`}
+            </div>
+        )}
+      />
+    </div>
+  ))

test/typeahead.test.tsx

@@ -31,9 +31,34 @@ describe('Typeahead', () => {
     expect(reactBootstrapTypeahead.prop('placeholder')).toEqual(placeholder)
     expect(reactBootstrapTypeahead.prop('minLength')).toEqual(minLength)
     expect(reactBootstrapTypeahead.prop('id')).toEqual(id)
+    expect(reactBootstrapTypeahead.prop('defaultSelected')).toEqual([])
     expect(wrapper.prop('labelKey')).toEqual(searchAccessor)
   })
 
+  it('should properly set the default value when value prop is given', () => {
+    const search = jest.fn()
+    const render = jest.fn()
+    const change = jest.fn()
+    const id = 'id'
+    const searchAccessor = 'search'
+    const placeholder = 'placeholder'
+    const expectedData = { id: '123' }
+
+    const wrapper = shallow(
+      <Typeahead
+        placeholder={placeholder}
+        onSearch={search}
+        onChange={change}
+        renderMenuItemChildren={render}
+        id={id}
+        value={expectedData}
+        searchAccessor={searchAccessor}
+      />,
+    )
+
+    expect(wrapper.find(AsyncTypeahead).prop('defaultSelected')).toEqual([expectedData])
+  })
+
   it('should default min length to 3', () => {
     const search = jest.fn()
     const render = jest.fn()