diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js index a05934961fac2a..af7e296af8cda1 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js @@ -432,22 +432,67 @@ describe('', () => { expect(textbox).toHaveFocus(); }); - it('should not be required if a value is selected', () => { - const { getByRole, setProps } = render( + it('has no textbox value', () => { + render( } multiple - options={['one', 'two']} - renderInput={(params) => } - value={[]} + value={['one', 'two']} />, ); - const textbox = getByRole('textbox'); - expect(textbox.hasAttribute('required')).to.equal(true); + expect(screen.getByRole('textbox')).to.have.property('value', ''); + }); + + it('should fail validation if a required field has no value', function test() { + if (/jsdom/.test(window.navigator.userAgent)) { + // Enable once https://github.com/jsdom/jsdom/issues/2898 is resolved + this.skip(); + } + + const handleSubmit = spy((event) => event.preventDefault()); + render( +
+ } + value={[]} + /> + + , + ); + + screen.getByRole('button', { name: 'Submit' }).click(); + + expect(handleSubmit.callCount).to.equal(0); + }); + + it('should fail validation if a required field has a value', function test() { + // Unclear how native Constraint validation can be enabled for `multiple` + if (/jsdom/.test(window.navigator.userAgent)) { + // Enable once https://github.com/jsdom/jsdom/issues/2898 is resolved + // The test is passing in JSDOM but form validation is buggy in JSDOM so we rather skip than have false confidence + this.skip(); + } - setProps({ value: ['one'] }); - expect(textbox.hasAttribute('required')).to.equal(false); + const handleSubmit = spy((event) => event.preventDefault()); + render( +
+ } + value={['one']} + /> + + , + ); + + screen.getByRole('button', { name: 'Submit' }).click(); + + expect(handleSubmit.callCount).to.equal(0); }); }); diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js index 069fc19791761f..feea18c89fb067 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js @@ -962,7 +962,6 @@ export default function useAutocomplete(props) { ref: inputRef, autoCapitalize: 'none', spellCheck: 'false', - ...(multiple && value.length > 0 ? { required: null } : {}), }), getClearProps: () => ({ tabIndex: -1,