feat(Dropdown): allow autoComplete on DropdownSearchInput

src/modules/Dropdown/DropdownSearchInput.d.ts

@@ -6,6 +6,9 @@ export interface DropdownSearchInputProps {
   /** An element type to render as (string or function). */
   as?: any;
 
+  /** An input can have the auto complete. */
+  autoComplete?: string;
+
   /** Additional classes. */
   className?: string;
 

src/modules/Dropdown/DropdownSearchInput.js

@@ -3,12 +3,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
-import {
-  createShorthandFactory,
-  customPropTypes,
-  META,
-  getUnhandledProps,
-} from '../../lib'
+import { createShorthandFactory, customPropTypes, META, getUnhandledProps } from '../../lib'
 
 /**
  * A search item sub-component for Dropdown component.
@@ -18,29 +13,27 @@ class DropdownSearchInput extends Component {
     /** An element type to render as (string or function). */
     as: customPropTypes.as,
 
+    /** An input can have the auto complete. */
+    autoComplete: PropTypes.string,
+
     /** Additional classes. */
     className: PropTypes.string,
 
     /** A ref handler for input. */
     inputRef: PropTypes.func,
 
     /** An input can receive focus. */
-    tabIndex: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.string,
-    ]),
+    tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
     /** The HTML input type. */
     type: PropTypes.string,
 
     /** Stored value. */
-    value: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.string,
-    ]),
+    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   }
 
   static defaultProps = {
+    autoComplete: 'off',
     type: 'text',
   }
 
@@ -59,15 +52,15 @@ class DropdownSearchInput extends Component {
   handleRef = c => _.invoke(this.props, 'inputRef', c)
 
   render() {
-    const { className, tabIndex, type, value } = this.props
+    const { autoComplete, className, tabIndex, type, value } = this.props
     const classes = cx('search', className)
     const rest = getUnhandledProps(DropdownSearchInput, this.props)
 
     return (
       <input
         {...rest}
         aria-autocomplete='list'
-        autoComplete='off'
+        autoComplete={autoComplete}
         className={classes}
         onChange={this.handleChange}
         ref={this.handleRef}

test/specs/modules/Dropdown/DropdownSearchInput-test.js

@@ -10,15 +10,17 @@ describe('DropdownSearchInput', () => {
 
   describe('aria', () => {
     it('should have aria-autocomplete', () => {
-      shallow(<DropdownSearchInput />)
-        .should.have.prop('aria-autocomplete', 'list')
+      shallow(<DropdownSearchInput />).should.have.prop('aria-autocomplete', 'list')
     })
   })
 
   describe('autoComplete', () => {
-    it('should have autoComplete', () => {
-      shallow(<DropdownSearchInput />)
-        .should.have.prop('autoComplete', 'off')
+    it('should have autoComplete by default', () => {
+      shallow(<DropdownSearchInput />).should.have.prop('autoComplete', 'off')
+    })
+
+    it('should pass a defined value', () => {
+      shallow(<DropdownSearchInput autoComplete='on' />).should.have.prop('autoComplete', 'on')
     })
   })
 
@@ -55,41 +57,35 @@ describe('DropdownSearchInput', () => {
 
   describe('tabIndex', () => {
     it('is not set by default', () => {
-      shallow(<DropdownSearchInput />)
-        .should.not.have.prop('tabIndex')
+      shallow(<DropdownSearchInput />).should.not.have.prop('tabIndex')
     })
 
     it('can be set explicitly', () => {
-      shallow(<DropdownSearchInput tabIndex={123} />)
-        .should.have.prop('tabIndex', 123)
+      shallow(<DropdownSearchInput tabIndex={123} />).should.have.prop('tabIndex', 123)
     })
   })
 
   describe('type', () => {
     it('should have text by default', () => {
-      shallow(<DropdownSearchInput />)
-        .should.have.prop('type', 'text')
+      shallow(<DropdownSearchInput />).should.have.prop('type', 'text')
     })
 
     it('can be set explicitly', () => {
       const type = faker.random.word()
 
-      shallow(<DropdownSearchInput type={type} />)
-        .should.have.prop('type', type)
+      shallow(<DropdownSearchInput type={type} />).should.have.prop('type', type)
     })
   })
 
   describe('value', () => {
     it('is not set by default', () => {
-      shallow(<DropdownSearchInput />)
-        .should.not.have.prop('value')
+      shallow(<DropdownSearchInput />).should.not.have.prop('value')
     })
 
     it('can be set explicitly', () => {
       const value = faker.random.word()
 
-      shallow(<DropdownSearchInput value={value} />)
-        .should.have.prop('value', value)
+      shallow(<DropdownSearchInput value={value} />).should.have.prop('value', value)
     })
   })
 })