[Autocomplete] Add forcePopupIcon prop (#18886)

docs/pages/api/autocomplete.md

@@ -43,6 +43,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">disablePortal</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Disable the portal behavior. The children stay within it's parent DOM hierarchy. |
 | <span class="prop-name">filterOptions</span> | <span class="prop-type">func</span> | | A filter function that determines the options that are eligible.<br><br>**Signature:**<br>`function(options: undefined, state: object) => undefined`<br>*options:* The options to render.<br>*state:* The state of the component. |
 | <span class="prop-name">filterSelectedOptions</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, hide the selected options from the list box. |
+| <span class="prop-name">forcePopupIcon</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;bool</span> | <span class="prop-default">'auto'</span> | Force the visibility display of the popup icon. |
 | <span class="prop-name">freeSolo</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options. |
 | <span class="prop-name">getOptionDisabled</span> | <span class="prop-type">func</span> | | Used to determine the disabled state for a given option. |
 | <span class="prop-name">getOptionLabel</span> | <span class="prop-type">func</span> | <span class="prop-default">x => x</span> | Used to determine the string value for a given option. It's used to fill the input (and the list box options if `renderOption` is not provided). |

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

@@ -62,6 +62,10 @@ export interface AutocompleteProps
  * The children stay within it's parent DOM hierarchy.
  */
  disablePortal?: boolean;
+ /**
+ * Force the visibility display of the popup icon.
+ */
+ forcePopupIcon?: true | false | 'auto';
  /**
  * The component used to render the listbox.
  */

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

@@ -235,6 +235,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
  disablePortal = false,
  filterOptions,
  filterSelectedOptions = false,
+ forcePopupIcon = 'auto',
  freeSolo = false,
  getOptionDisabled,
  getOptionLabel = x => x,
@@ -373,7 +374,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
  </IconButton>
  )}
 
- {freeSolo ? null : (
+ {(!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false ? (
  <IconButton
  {...getPopupIndicatorProps()}
  disabled={disabled}
@@ -385,7 +386,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
  >
  {popupIcon}
  </IconButton>
- )}
+ ) : null}
  </div>
  ),
  },
@@ -545,6 +546,10 @@ Autocomplete.propTypes = {
  * If `true`, hide the selected options from the list box.
  */
  filterSelectedOptions: PropTypes.bool,
+ /**
+ * Force the visibility display of the popup icon.
+ */
+ forcePopupIcon: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.bool]),
  /**
  * If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options.
  */