diff --git a/packages/core/package.json b/packages/core/package.json index 9e7220651a..90c0c0d7e1 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -12,7 +12,7 @@ "@cmsgov/design-system-support": "^1.27.0", "classnames": "^2.2.5", "core-js": "^2.5.3", - "downshift": "^1.28.2", + "downshift": "1.31.16", "ev-emitter": "^1.1.1", "lodash.uniqueid": "^4.0.1", "react-aria-modal": "^2.11.1", diff --git a/packages/core/src/components/Autocomplete/Autocomplete.example.jsx b/packages/core/src/components/Autocomplete/Autocomplete.example.jsx index d94f4505d5..8d943470c6 100644 --- a/packages/core/src/components/Autocomplete/Autocomplete.example.jsx +++ b/packages/core/src/components/Autocomplete/Autocomplete.example.jsx @@ -40,6 +40,7 @@ ReactDOM.render( name: 'Cook County, OR' } ]} + focusTrigger label="Select from the options below:" onChange={selectedItem => console.log(selectedItem)} onInputValueChange={inputVal => diff --git a/packages/core/src/components/Autocomplete/Autocomplete.jsx b/packages/core/src/components/Autocomplete/Autocomplete.jsx index 0a47eb68e1..99c56d9869 100644 --- a/packages/core/src/components/Autocomplete/Autocomplete.jsx +++ b/packages/core/src/components/Autocomplete/Autocomplete.jsx @@ -23,9 +23,10 @@ export class Autocomplete extends React.PureComponent { constructor(props) { super(props); - this.id = uniqueId('autocomplete_'); + this.id = this.props.id || uniqueId('autocomplete_'); this.labelId = uniqueId('autocomplete_header_'); this.listboxId = uniqueId('autocomplete_owned_listbox_'); + this.loader = null; } filterItems( @@ -69,12 +70,14 @@ export class Autocomplete extends React.PureComponent { } renderChildren(getInputProps) { - // Extend props on the TextField, by passing them through - // Downshift's `getInputProps` method + // Extend props on the TextField, by passing them + // through Downshift's `getInputProps` method return React.Children.map(this.props.children, child => { if (isTextField(child)) { const propOverrides = { 'aria-controls': this.listboxId, + autoComplete: this.props.autoCompleteLabel, + focusTrigger: this.props.focusTrigger, id: this.id, onBlur: child.props.onBlur, onChange: child.props.onChange, @@ -167,6 +170,7 @@ export class Autocomplete extends React.PureComponent { Autocomplete.defaultProps = { ariaClearLabel: 'Clear typeahead and search again', + autoCompleteLabel: 'nope', clearInputText: 'Clear search', itemToString: item => (item ? item.name : ''), loadingMessage: 'Loading...', @@ -178,6 +182,13 @@ Autocomplete.propTypes = { * Screenreader-specific label for the Clear search `