[Autocomplete] Fix crash with freeSolo and rich options

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { expect } from 'chai';
 import { createMount, getClasses } from '@material-ui/core/test-utils';
 import describeConformance from '@material-ui/core/test-utils/describeConformance';
+import consoleErrorMock from 'test/utils/consoleErrorMock';
 import { spy } from 'sinon';
 import { createClientRender, fireEvent } from 'test/utils/createClientRender';
 import Autocomplete from './Autocomplete';
@@ -369,4 +370,36 @@ describe('<Autocomplete />', () => {
       });
     });
   });
+
+  describe('warnings', () => {
+    beforeEach(() => {
+      consoleErrorMock.spy();
+    });
+
+    afterEach(() => {
+      consoleErrorMock.reset();
+    });
+
+    it('warn if getOptionLabel do not return a string', () => {
+      const handleChange = spy();
+      const { container } = render(
+        <Autocomplete
+          freeSolo
+          onChange={handleChange}
+          options={[{ name: 'test' }, { name: 'foo' }]}
+          getOptionLabel={option => option.name}
+          renderInput={params => <TextField {...params} />}
+        />,
+      );
+      const input = container.querySelector('input');
+      fireEvent.change(input, { target: { value: 'a' } });
+      fireEvent.keyDown(input, { key: 'Enter' });
+      expect(handleChange.callCount).to.equal(1);
+      expect(handleChange.args[0][1]).to.equal('a');
+      expect(consoleErrorMock.callCount()).to.equal(2); // strict mode renders twice
+      expect(consoleErrorMock.args()[0][0]).to.include(
+        'For the input option: "a", `getOptionLabel` returns: undefined',
+      );
+    });
+  });
 });

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

@@ -171,8 +171,26 @@ export default function useAutocomplete(props) {
     let newInputValue;
     if (multiple) {
       newInputValue = '';
+    } else if (newValue == null) {
+      newInputValue = '';
     } else {
-      newInputValue = newValue != null ? getOptionLabel(newValue) : '';
+      const optionLabel = getOptionLabel(newValue);
+
+      if (process.env.NODE_ENV !== 'production') {
+        if (typeof optionLabel !== 'string') {
+          console.error(
+            [
+              'Material-UI: the `getOptionLabel` method of useAutocomplete do not handle the options correctly.',
+              `The component expect a string but received ${typeof optionLabel}.`,
+              `For the input option: ${JSON.stringify(
+                newValue,
+              )}, \`getOptionLabel\` returns: ${newInputValue}.`,
+            ].join('\n'),
+          );
+        }
+      }
+
+      newInputValue = typeof optionLabel === 'string' ? optionLabel : '';
     }
 
     setInputValue(newInputValue);