[Autocomplete] Add getOptionSelected prop

docs/pages/api/autocomplete.md

@@ -45,6 +45,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <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). |
+| <span class="prop-name">getOptionSelected</span> | <span class="prop-type">func</span> |  | Used to determine if an option is selected. Uses strict equality by default. |
 | <span class="prop-name">groupBy</span> | <span class="prop-type">func</span> |  | If provided, the options will be grouped under the returned string. The groupBy value is also used as the text for group headings when `renderGroup` is not provided.<br><br>**Signature:**<br>`function(options: any) => string`<br>*options:* The option to group. |
 | <span class="prop-name">id</span> | <span class="prop-type">string</span> |  | This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id. |
 | <span class="prop-name">includeInputInList</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the highlight can move to the input. |

docs/src/pages/components/autocomplete/Asynchronous.js

@@ -55,6 +55,7 @@ export default function Asynchronous() {
       onClose={() => {
         setOpen(false);
       }}
+      getOptionSelected={(option, value) => option.name === value.name}
       getOptionLabel={option => option.name}
       options={options}
       loading={loading}

docs/src/pages/components/autocomplete/Asynchronous.tsx

@@ -59,6 +59,7 @@ export default function Asynchronous() {
       onClose={() => {
         setOpen(false);
       }}
+      getOptionSelected={(option, value) => option.name === value.name}
       getOptionLabel={option => option.name}
       options={options}
       loading={loading}

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

@@ -236,6 +236,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
     freeSolo = false,
     getOptionDisabled,
     getOptionLabel = x => x,
+    getOptionSelected,
     groupBy,
     id: idProp,
     includeInputInList = false,
@@ -553,6 +554,11 @@ Autocomplete.propTypes = {
    * It's used to fill the input (and the list box options if `renderOption` is not provided).
    */
   getOptionLabel: PropTypes.func,
+  /**
+   * Used to determine if an option is selected.
+   * Uses strict equality by default.
+   */
+  getOptionSelected: PropTypes.func,
   /**
    * If provided, the options will be grouped under the returned string.
    * The groupBy value is also used as the text for group headings when `renderGroup` is not provided.

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

@@ -90,6 +90,11 @@ export interface UseAutocompleteProps {
    * It's used to fill the input (and the list box options if `renderOption` is not provided).
    */
   getOptionLabel?: (option: any) => string;
+  /**
+   * Used to determine if an option is selected.
+   * Uses strict equality by default.
+   */
+  getOptionSelected?: (option: any, value: any) => boolean;
   /**
    * If provided, the options will be grouped under the returned string.
    * The groupBy value is also used as the text for group headings when `renderGroup` is not provided.

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

@@ -83,6 +83,7 @@ export default function useAutocomplete(props) {
     freeSolo = false,
     getOptionDisabled,
     getOptionLabel = x => x,
+    getOptionSelected = (option, value) => option === value,
     groupBy,
     id: idProp,
     includeInputInList = false,
@@ -239,7 +240,9 @@ export default function useAutocomplete(props) {
         options.filter(option => {
           if (
             filterSelectedOptions &&
-            (multiple ? value.indexOf(option) !== -1 : value === option)
+            (multiple ? value : [value]).some(
+              value2 => value2 !== null && getOptionSelected(option, value2),
+            )
           ) {
             return false;
           }
@@ -416,7 +419,15 @@ export default function useAutocomplete(props) {
     if (multiple) {
       const item = newValue;
       newValue = Array.isArray(value) ? [...value] : [];
-      const itemIndex = value.indexOf(item);
+
+      let itemIndex = -1;
+      // To replace with .findIndex() once we stop IE 11 support.
+      for (let i = 0; i < newValue.length; i += 1) {
+        if (getOptionSelected(item, newValue[i])) {
+          itemIndex = i;
+        }
+      }
+
       if (itemIndex === -1) {
         newValue.push(item);
       } else {
@@ -791,7 +802,9 @@ export default function useAutocomplete(props) {
       },
     }),
     getOptionProps: ({ index, option }) => {
-      const selected = multiple ? value.indexOf(option) !== -1 : value === option;
+      const selected = (multiple ? value : [value]).some(
+        value2 => value2 != null && getOptionSelected(option, value2),
+      );
       const disabled = getOptionDisabled ? getOptionDisabled(option) : false;
 
       return {