use a warning + fallback

mui · Nov 4, 2019 · bb8de22 · bb8de22
1 parent e0e6996
commit bb8de22
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 7 deletions.
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/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';
@@ -370,15 +371,22 @@ describe('<Autocomplete />', () => {
     });
   });
 
-  describe('free solo', () => {
-    it('should accept any value', () => {
-      const options = [{ name: 'test' }, { name: 'foo' }];
+  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={options}
+          options={[{ name: 'test' }, { name: 'foo' }]}
           getOptionLabel={option => option.name}
           renderInput={params => <TextField {...params} />}
         />,
@@ -388,6 +396,10 @@ describe('<Autocomplete />', () => {
       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',
+      );
     });
   });
 });
diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -171,10 +171,26 @@ export default function useAutocomplete(props) {
     let newInputValue;
     if (multiple) {
       newInputValue = '';
-    } else if (freeSolo && typeof newValue === 'string') {
-      newInputValue = newValue;
+    } 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);