[Select][base-ui] Removes highlighted class on item deselection

packages/mui-base/src/Select/Select.test.tsx

@@ -1234,4 +1234,28 @@ describe('<Select />', () => {
     expect(renderOption3Spy.callCount).to.equal(0);
     expect(renderOption4Spy.callCount).to.equal(0);
   });
+
+  it('option should have highlighted class only when it is selected', () => {
+    const { getAllByRole } = render(
+      <Select multiple defaultValue={[10]} defaultListboxOpen>
+        <Option value={10}>10</Option>
+        <Option value={20}>20</Option>
+        <Option value={30}>30</Option>
+        <Option value={40}>40</Option>
+      </Select>,
+    );
+
+    const options = getAllByRole('option');
+    const secondOption = options[1];
+
+    // it doesn't have highlighted class as it is not selected
+    expect(secondOption).not.to.have.class(optionClasses.highlighted);
+
+    // selects option
+    fireEvent.click(secondOption);
+    expect(secondOption).to.have.class(optionClasses.highlighted);
+    // deselects option
+    fireEvent.click(secondOption);
+    expect(secondOption).not.to.have.class(optionClasses.highlighted);
+  });
 });

packages/mui-base/src/useList/listReducer.ts

@@ -217,10 +217,11 @@ function handleItemSelection<ItemValue, State extends ListState<ItemValue>>(
   // if the item is already selected, remove it from the selection, otherwise add it
   const newSelectedValues = toggleSelection(item, selectedValues, selectionMode, itemComparer);
 
+  const highlightedValue = selectedValues.includes(items[itemIndex]) ? null : item;
   return {
     ...state,
     selectedValues: newSelectedValues,
-    highlightedValue: item,
+    highlightedValue,
   };
 }