[Autocomplete] Ignore object keys in default filter (#18480)

Author: eggbread

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

@@ -658,4 +658,38 @@ describe('<Autocomplete />', () => {
       expect(textbox.value).to.equal('');
     });
   });
+
+  describe('prop: filterOptions', () => {
+    it('should ignore object keys by default', () => {
+      const { queryAllByRole, getByRole } = render(
+        <Autocomplete
+          options={[
+            {
+              value: 'one',
+              label: 'One',
+            },
+            {
+              value: 'two',
+              label: 'Two',
+            },
+          ]}
+          getOptionLabel={option => option.name}
+          renderInput={params => <TextField autoFocus {...params} />}
+        />,
+      );
+      let options;
+      const textbox = getByRole('textbox');
+
+      options = queryAllByRole('option');
+      expect(options.length).to.equal(2);
+
+      fireEvent.change(textbox, { target: { value: 'value' } });
+      options = queryAllByRole('option');
+      expect(options.length).to.equal(0);
+
+      fireEvent.change(textbox, { target: { value: 'one' } });
+      options = queryAllByRole('option');
+      expect(options.length).to.equal(1);
+    });
+  });
 });

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

@@ -11,12 +11,30 @@ 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 = JSON.stringify,
+    stringify = defaultStringify,
     trim = false,
   } = config;