diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
index c9d0372ac38577..b463d22b2b8162 100644
--- 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';
@@ -369,4 +370,36 @@ describe('', () => {
});
});
});
+
+ describe('warnings', () => {
+ beforeEach(() => {
+ consoleErrorMock.spy();
+ });
+
+ afterEach(() => {
+ consoleErrorMock.reset();
+ });
+
+ it('warn if getOptionLabel do not return a string', () => {
+ const handleChange = spy();
+ const { container } = render(
+ option.name}
+ renderInput={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',
+ );
+ });
+ });
});
diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index 1d947d6ffc27e1..72d7c84c367f72 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/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);