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);