[Autocomplete] Use getOptionLabel over stringify (mui#19974)

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

@@ -3,7 +3,7 @@ import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
 
-const filter = createFilterOptions();
+const filter = createFilterOptions<FilmOptionType>();
 
 export default function FreeSoloCreateOption() {
   const [value, setValue] = React.useState<FilmOptionType | null>(null);

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

@@ -9,7 +9,7 @@ import DialogActions from '@material-ui/core/DialogActions';
 import Button from '@material-ui/core/Button';
 import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
 
-const filter = createFilterOptions();
+const filter = createFilterOptions<FilmOptionType>();
 
 export default function FreeSoloCreateOptionDialog() {
   const [value, setValue] = React.useState<FilmOptionType | null>(null);

docs/src/pages/components/autocomplete/autocomplete.md

@@ -137,16 +137,22 @@ You can use it to change the default option filter behavior.
 import { createFilterOptions } from '@material-ui/lab/Autocomplete';
 ```
 
-It supports the following options:
+### `createFilterOptions(config) => filterOptions`
+
+#### Arguments
 
 1. `config` (*Object* [optional]):
   - `config.ignoreAccents` (*Boolean* [optional]): Defaults to `true`. Remove diacritics.
   - `config.ignoreCase` (*Boolean* [optional]): Defaults to `true`. Lowercase everything.
   - `config.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`.
-  - `config.stringify` (*Func* [optional]): Defaults to `JSON.stringify`.
+  - `config.stringify` (*Func* [optional]): Controls how an option is converted into a string so that it can be matched against the input text fragment.
   - `config.trim` (*Boolean* [optional]): Defaults to `false`. Remove trailing spaces.
   - `config.limit` (*Number* [optional]): Default to null. Limit the number of suggested options to be shown. For example, if `config.limit` is `100`, only the first `100` matching options are shown. It can be useful if a lot of options match and virtualization wasn't set up.
 
+#### Returns
+
+`filterOptions`: the returned filter method can be provided directly to the `filterOptions` prop of the `Autocomplete` component, or the parameter of the same name for the hook.
+
 In the following demo, the options need to start with the query prefix:
 
 ```js

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

@@ -9,13 +9,14 @@ export interface CreateFilterOptionsConfig<T> {
   limit?: number;
 }
 
-export interface FilterOptionsState {
+export interface FilterOptionsState<T> {
   inputValue: string;
+  getOptionLabel: (option: T) => string;
 }
 
 export function createFilterOptions<T>(
   config?: CreateFilterOptionsConfig<T>,
-): (options: T[], state: FilterOptionsState) => T[];
+): (options: T[], state: FilterOptionsState<T>) => T[];
 
 export interface UseAutocompleteCommonProps<T> {
   /**
@@ -76,7 +77,7 @@ export interface UseAutocompleteCommonProps<T> {
    * @param {object} state The state of the component.
    * @returns {T[]}
    */
-  filterOptions?: (options: T[], state: FilterOptionsState) => T[];
+  filterOptions?: (options: T[], state: FilterOptionsState<T>) => T[];
   /**
    * If `true`, hide the selected options from the list box.
    */

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

@@ -11,35 +11,17 @@ function stripDiacritics(string) {
     : string;
 }
 
-function defaultStringify(value) {
-  if (value == null) {
-    return '';
-  }
-
-  if (typeof value === 'string') {
-    return value;
-  }
-
-  if (typeof value === 'object') {
-    return Object.keys(value)
-      .map(key => value[key])
-      .join(' ');
-  }
-
-  return JSON.stringify(value);
-}
-
 export function createFilterOptions(config = {}) {
   const {
     ignoreAccents = true,
     ignoreCase = true,
     matchFrom = 'any',
-    stringify = defaultStringify,
+    stringify,
     trim = false,
     limit,
   } = config;
 
-  return (options, { inputValue }) => {
+  return (options, { inputValue, getOptionLabel }) => {
     let input = trim ? inputValue.trim() : inputValue;
     if (ignoreCase) {
       input = input.toLowerCase();
@@ -48,7 +30,7 @@ export function createFilterOptions(config = {}) {
       input = stripDiacritics(input);
     }
     const filteredOptions = options.filter(option => {
-      let candidate = stringify(option);
+      let candidate = (stringify || getOptionLabel)(option);
       if (ignoreCase) {
         candidate = candidate.toLowerCase();
       }
@@ -269,7 +251,7 @@ export default function useAutocomplete(props) {
         }),
         // we use the empty string to manipulate `filterOptions` to not filter any options
         // i.e. the filter predicate always returns true
-        { inputValue: inputValueIsSelectedValue ? '' : inputValue },
+        { inputValue: inputValueIsSelectedValue ? '' : inputValue, getOptionLabel },
       )
     : [];
 

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

@@ -0,0 +1,26 @@
+import { expect } from 'chai';
+import { createFilterOptions } from './useAutocomplete';
+
+describe('createFilterOptions', () => {
+  it('defaults to getOptionLabel for text filtering', () => {
+    const filterOptions = createFilterOptions();
+
+    const getOptionLabel = option => option.name;
+    const options = [
+      {
+        id: '1234',
+        name: 'cat',
+      },
+      {
+        id: '5678',
+        name: 'dog',
+      },
+      {
+        id: '9abc',
+        name: 'emu',
+      },
+    ];
+
+    expect(filterOptions(options, { inputValue: 'a', getOptionLabel })).to.deep.equal([options[0]]);
+  });
+});