diff --git a/src/modules/Dropdown/DropdownSearchInput.d.ts b/src/modules/Dropdown/DropdownSearchInput.d.ts index bf1191e65a..a08f509453 100644 --- a/src/modules/Dropdown/DropdownSearchInput.d.ts +++ b/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; diff --git a/src/modules/Dropdown/DropdownSearchInput.js b/src/modules/Dropdown/DropdownSearchInput.js index 9fcd9f12a5..8f209106bd 100644 --- a/src/modules/Dropdown/DropdownSearchInput.js +++ b/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,6 +13,9 @@ 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, @@ -25,22 +23,17 @@ class DropdownSearchInput extends Component { 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,7 +52,7 @@ 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) @@ -67,7 +60,7 @@ class DropdownSearchInput extends Component { { describe('aria', () => { it('should have aria-autocomplete', () => { - shallow() - .should.have.prop('aria-autocomplete', 'list') + shallow().should.have.prop('aria-autocomplete', 'list') }) }) describe('autoComplete', () => { - it('should have autoComplete', () => { - shallow() - .should.have.prop('autoComplete', 'off') + it('should have autoComplete by default', () => { + shallow().should.have.prop('autoComplete', 'off') + }) + + it('should pass a defined value', () => { + shallow().should.have.prop('autoComplete', 'on') }) }) @@ -55,41 +57,35 @@ describe('DropdownSearchInput', () => { describe('tabIndex', () => { it('is not set by default', () => { - shallow() - .should.not.have.prop('tabIndex') + shallow().should.not.have.prop('tabIndex') }) it('can be set explicitly', () => { - shallow() - .should.have.prop('tabIndex', 123) + shallow().should.have.prop('tabIndex', 123) }) }) describe('type', () => { it('should have text by default', () => { - shallow() - .should.have.prop('type', 'text') + shallow().should.have.prop('type', 'text') }) it('can be set explicitly', () => { const type = faker.random.word() - shallow() - .should.have.prop('type', type) + shallow().should.have.prop('type', type) }) }) describe('value', () => { it('is not set by default', () => { - shallow() - .should.not.have.prop('value') + shallow().should.not.have.prop('value') }) it('can be set explicitly', () => { const value = faker.random.word() - shallow() - .should.have.prop('value', value) + shallow().should.have.prop('value', value) }) }) })