Merge pull request #290 from MatthewDorner/disabled-typeahead

fix(typeahead): add disabled prop to Typeahead

src/components/Typeahead/Typeahead.tsx

@@ -11,6 +11,7 @@ interface Props {
   minLength?: number
   placeholder?: string
   value?: any
+  disabled?: boolean
 }
 
 const Typeahead = (props: Props) => {
@@ -25,6 +26,7 @@ const Typeahead = (props: Props) => {
     renderMenuItemChildren,
     minLength,
     value,
+    disabled,
   } = props
 
   const search = async (query: string) => {
@@ -51,6 +53,7 @@ const Typeahead = (props: Props) => {
       onChange={onChange}
       renderMenuItemChildren={renderMenuItemChildren}
       defaultSelected={selectedValues}
+      disabled={disabled}
     />
   )
 }

stories/typeahead.stories.tsx

@@ -72,3 +72,27 @@ storiesOf('Typeahead', module)
       />
     </div>
   ))
+  .add('Disabled Typeahead', () => (
+    <div>
+      <Typeahead
+        id="typeahead"
+        searchAccessor="fullName"
+        placeholder="placeholder"
+        onSearch={() => getOptions()}
+        onChange={(selected) => alert(JSON.stringify(selected))}
+        disabled
+        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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { shallow, mount } from 'enzyme'
 import { AsyncTypeahead } from 'react-bootstrap-typeahead'
 import { act } from 'react-dom/test-utils'
 import { Typeahead } from '../src/components/Typeahead'
@@ -111,4 +111,55 @@ describe('Typeahead', () => {
     expect(change).toHaveBeenCalledTimes(1)
     expect(change).toHaveBeenLastCalledWith(expectedData)
   })
+
+  it('renders a non-disabled Typeahead', () => {
+    const search = jest.fn()
+    const render = jest.fn()
+    const change = jest.fn()
+    const id = 'id'
+    const searchAccessor = 'search'
+    const placeholder = 'placeholder'
+    const minLength = 5
+
+    const wrapper = mount(
+      <Typeahead
+        placeholder={placeholder}
+        minLength={minLength}
+        onSearch={search}
+        onChange={change}
+        renderMenuItemChildren={render}
+        id={id}
+        searchAccessor={searchAccessor}
+      />,
+    )
+
+    const input = wrapper.find(AsyncTypeahead)
+    expect(input.prop('disabled')).not.toBe(true)
+  })
+
+  it('renders a disabled Typeahead', () => {
+    const search = jest.fn()
+    const render = jest.fn()
+    const change = jest.fn()
+    const id = 'id'
+    const searchAccessor = 'search'
+    const placeholder = 'placeholder'
+    const minLength = 5
+
+    const wrapper = mount(
+      <Typeahead
+        placeholder={placeholder}
+        minLength={minLength}
+        onSearch={search}
+        onChange={change}
+        disabled
+        renderMenuItemChildren={render}
+        id={id}
+        searchAccessor={searchAccessor}
+      />,
+    )
+
+    const input = wrapper.find(AsyncTypeahead)
+    expect(input.prop('disabled')).toBe(true)
+  })
 })