diff --git a/README.md b/README.md index 80adda87..aa6b5e0e 100644 --- a/README.md +++ b/README.md @@ -163,6 +163,7 @@ class Example extends React.Component { | [`getSuggestionValue`](#get-suggestion-value-prop) | Function | ✓ | Implement it to teach Autosuggest what should be the input value when suggestion is clicked. | | [`renderSuggestion`](#render-suggestion-prop) | Function | ✓ | Use your imagination to define how suggestions are rendered. | | [`inputProps`](#input-props-prop) | Object | ✓ | Pass through arbitrary props to the input. It must contain at least `value` and `onChange`. | +| [`containerProps`](#container-props-prop) | Object | | Pass through arbitrary props to the container. Useful if you need to override the default props set by Autowhatever, for example, for accessibility. | | [`onSuggestionSelected`](#on-suggestion-selected-prop) | Function | | Will be called every time suggestion is selected via mouse or keyboard. | | [`onSuggestionHighlighted`](#on-suggestion-highlighted-prop) | Function | | Will be called every time the highlighted suggestion changes. | | [`shouldRenderSuggestions`](#should-render-suggestions-prop) | Function | | When the input is focused, Autosuggest will consult this function when to render suggestions. Use it, for example, if you want to display suggestions when input value is at least 2 characters long. | @@ -367,6 +368,19 @@ where: - `highlightedSuggestion` - the suggestion that was highlighted just before the input lost focus, or `null` if there was no highlighted suggestion. + + +#### containerProps + +Provides arbitrary properties to the outer `div` container of Autosuggest. Allows the override of accessibility properties. + +```js +const containerProps = { + dataId: 'my-data-id' + // ... any other properties +}; +``` + #### onSuggestionSelected (optional) diff --git a/src/Autosuggest.js b/src/Autosuggest.js index 433e43c9..6f3269da 100644 --- a/src/Autosuggest.js +++ b/src/Autosuggest.js @@ -95,6 +95,7 @@ export default class Autosuggest extends Component { highlightFirstSuggestion: PropTypes.bool, theme: PropTypes.object, id: PropTypes.string, + containerProps: PropTypes.object, // Arbitrary container props }; static defaultProps = { @@ -107,6 +108,7 @@ export default class Autosuggest extends Component { highlightFirstSuggestion: false, theme: defaultTheme, id: '1', + containerProps: {}, }; constructor({ alwaysRenderSuggestions }) { @@ -558,6 +560,7 @@ export default class Autosuggest extends Component { getSuggestionValue, alwaysRenderSuggestions, highlightFirstSuggestion, + containerProps, } = this.props; const { isFocused, @@ -806,6 +809,7 @@ export default class Autosuggest extends Component { getSectionItems={getSectionSuggestions} highlightedSectionIndex={highlightedSectionIndex} highlightedItemIndex={highlightedSuggestionIndex} + containerProps={containerProps} inputProps={autowhateverInputProps} itemProps={this.itemProps} theme={mapToAutowhateverTheme(theme)}