Merge pull request #785 from aashishnagpal/master

moroshko · Jan 8, 2021 · 59151e9 · 59151e9
2 parents 1f59e5e + 968495e
commit 59151e9
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git 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.
 
+<a name="container-props-prop"></a>
+
+#### 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
+};
+```
+
 <a name="on-suggestion-selected-prop"></a>
 
 #### onSuggestionSelected (optional)

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