From d5d744dbedf0f333128fa78f863f8428ec219ef1 Mon Sep 17 00:00:00 2001 From: Zlata <129689245+kkatalz@users.noreply.github.com> Date: Thu, 22 Oct 2026 15:10:20 +0300 Subject: [PATCH 1/3] [select] Fix matching option values of a different type on click and autofill handleItemClick looked the clicked option up in value with indexOf, a strict compare, while selected and the typeahead use areEqualValues. With value={['10']} and , the option showed as selected, but a click appended 10 instead of removing '10'. The autofill handler had the same strict compare, so autofilling '10' into a Select with numeric options matched nothing. Both now use areEqualValues; object values still compare by identity. --- .../mui-material/src/Select/Select.test.js | 33 +++++++++++++++++++ .../mui-material/src/Select/SelectInput.js | 6 ++-- 2 files changed, 37 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js index de50eb1454d97c..e24e5cd7ff5633 100644 --- a/packages/mui-material/src/Select/Select.test.js +++ b/packages/mui-material/src/Select/Select.test.js @@ -2220,6 +2220,21 @@ describe(' + Ten + Twenty + , + ); + + fireEvent.click(screen.getAllByRole('option')[0]); + + expect(onChange.callCount).to.equal(1); + expect(onChange.firstCall.args[0].target.value).to.deep.equal(['20']); + }); + it("selects values based on strict equality if they're objects", () => { const obj1 = { id: 1 }; const obj2 = { id: 2 }; @@ -2506,6 +2521,24 @@ describe(' + Ten + Twenty + , + ); + fireEvent.change(container.querySelector('input[name="age"]'), { + target: { + value: '10', + }, + }); + + expect(onChangeHandler.callCount).to.equal(1); + expect(screen.getByRole('combobox')).to.have.text('Ten'); + }); + // see https://github.com/jsdom/jsdom/issues/123 it.skipIf(isJsdom())('should support native form validation', function test() { const handleSubmit = spy((event) => { diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js index 806baf3def7faa..aed15c6856645b 100644 --- a/packages/mui-material/src/Select/SelectInput.js +++ b/packages/mui-material/src/Select/SelectInput.js @@ -454,7 +454,9 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) { // Support autofill. const handleChange = (event) => { - const child = childrenArray.find((childItem) => childItem.props.value === event.target.value); + const child = childrenArray.find((childItem) => + areEqualValues(event.target.value, childItem.props.value), + ); if (child === undefined) { return; @@ -499,7 +501,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) { if (multiple) { newValue = Array.isArray(value) ? value.slice() : []; - const itemIndex = value.indexOf(child.props.value); + const itemIndex = value.findIndex((v) => areEqualValues(v, child.props.value)); if (itemIndex === -1) { newValue.push(child.props.value); } else { From d5009a025cc3a85f45a7012066d140dddfb9d9ae Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Tue, 27 Oct 2026 17:39:15 +0530 Subject: [PATCH 2/3] handle browser autofill when multiple --- .../mui-material/src/Select/Select.test.js | 20 +++++++++++++++++++ .../mui-material/src/Select/SelectInput.js | 6 +----- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js index fff81a2707bad3..9279ba200a80c3 100644 --- a/packages/mui-material/src/Select/Select.test.js +++ b/packages/mui-material/src/Select/Select.test.js @@ -2536,6 +2536,26 @@ describe(' + Ten + Twenty + , + ); + fireEvent.change(container.querySelector('input[name="age"]'), { + target: { + value: '10', + }, + }); + + expect(onChangeHandler.callCount).to.equal(1); + expect(onChangeHandler.firstCall.args[0].target.value).to.deep.equal([10]); expect(screen.getByRole('combobox')).to.have.text('Ten'); }); diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js index 6997813652951a..78d6855e69233f 100644 --- a/packages/mui-material/src/Select/SelectInput.js +++ b/packages/mui-material/src/Select/SelectInput.js @@ -471,11 +471,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) { return; } - setValueState(child.props.value); - - if (onChange) { - onChange(event, child); - } + handleValueChange(event, child, multiple ? [child.props.value] : child.props.value); }; const handleValueChange = (event, child, newValue) => { From 8c1b90450c55d29952c05c99f27b512af8d61e20 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Tue, 27 Oct 2026 17:42:45 +0530 Subject: [PATCH 3/3] Fix lint --- .../mui-material/src/Select/SelectInput.js | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js index 78d6855e69233f..efacffe13fe70c 100644 --- a/packages/mui-material/src/Select/SelectInput.js +++ b/packages/mui-material/src/Select/SelectInput.js @@ -461,19 +461,6 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) { const childrenArray = React.Children.toArray(children); - // Support autofill. - const handleChange = (event) => { - const child = childrenArray.find((childItem) => - areEqualValues(event.target.value, childItem.props.value), - ); - - if (child === undefined) { - return; - } - - handleValueChange(event, child, multiple ? [child.props.value] : child.props.value); - }; - const handleValueChange = (event, child, newValue) => { setValueState(newValue); @@ -494,6 +481,19 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) { } }; + // Support autofill. + const handleChange = (event) => { + const child = childrenArray.find((childItem) => + areEqualValues(event.target.value, childItem.props.value), + ); + + if (child === undefined) { + return; + } + + handleValueChange(event, child, multiple ? [child.props.value] : child.props.value); + }; + const handleItemClick = (child) => (event) => { didPointerDownOnItemRef.current = false;