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)
})
})
})