[Autocomplete] Support ChipProps prop (#18917)

docs/pages/api/autocomplete.md

@@ -28,6 +28,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">autoHighlight</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the first option is automatically highlighted. |
 | <span class="prop-name">autoSelect</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input. |
 | <span class="prop-name">blurOnSelect</span> | <span class="prop-type">'mouse'<br>&#124;&nbsp;'touch'<br>&#124;&nbsp;bool</span> | <span class="prop-default">false</span> | Control if the input should be blurred when an option is selected:<br>- `false` the input is not blurred. - `true` the input is always blurred. - `touch` the input is blurred after a touch event. - `mouse` the input is blurred after a mouse event. |
+| <span class="prop-name">ChipProps</span> | <span class="prop-type">object</span> |  | Props applied to the [`Chip`](/api/chip/) element. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">clearOnEscape</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, clear all values when the user presses escape and the popup is closed. |
 | <span class="prop-name">clearText</span> | <span class="prop-type">string</span> | <span class="prop-default">'Clear'</span> | Override the default text for the *clear* icon button.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |

packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts

@@ -37,6 +37,10 @@ export interface AutocompleteProps
       AutocompleteClassKey,
       'defaultValue' | 'onChange' | 'children'
     > {
+  /**
+   * Props applied to the [`Chip`](/api/chip/) element.
+   */
+  ChipProps?: object;
   /**
    * The icon to display in place of the default close icon.
    */

packages/material-ui-lab/src/Autocomplete/Autocomplete.js

@@ -219,6 +219,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
     autoHighlight = false,
     autoSelect = false,
     blurOnSelect = false,
+    ChipProps,
     classes,
     className,
     clearOnEscape = false,
@@ -307,7 +308,12 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
       startAdornment = renderTags(value, getCustomizedTagProps);
     } else {
       startAdornment = value.map((option, index) => (
-        <Chip label={getOptionLabel(option)} size={size} {...getCustomizedTagProps({ index })} />
+        <Chip
+          label={getOptionLabel(option)}
+          size={size}
+          {...getCustomizedTagProps({ index })}
+          {...ChipProps}
+        />
       ));
     }
   }
@@ -475,6 +481,10 @@ Autocomplete.propTypes = {
    * - `mouse` the input is blurred after a mouse event.
    */
   blurOnSelect: PropTypes.oneOfType([PropTypes.oneOf(['mouse', 'touch']), PropTypes.bool]),
+  /**
+   * Props applied to the [`Chip`](/api/chip/) element.
+   */
+  ChipProps: PropTypes.object,
   /**
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.