[joy-ui][Select] Bug: Options visually selected after clicking the clear selections button in the Select component

[AugustoAmaral]

Related page

https://mui.com/joy-ui/react-select/

Kind of issue

Broken demo

Issue description

There is a bug in JoyUI's Select component at Clear Action example. When I use the clear selections button, the selected values ​​are removed as expected. However, when I open the options menu again, the previously chosen options still visually appear as selected.

Steps to reproduce:

1- Go to the Select component example page with the clear selections button.
2- Select some options in Select.
3- Click the button to clear selections.
4- Open the Select Options menu again.

Expected behavior:

Options that were previously selected should not visually appear as selected after clicking the clear selections button.

Current behavior:

Options that were previously selected still appear visually as selected after clicking the clear selections button, even though they are no longer selected.

Context

While implementing a Select all option, I realized the effect was not being applied correctly after selecting all the options.

Search keywords: UI, visual bug, clear selection

[yitzchak-schechter]

@AugustoAmaral I don't see the problem described.
There are no issues even with multiple selections.

Example for multiple selections:

import Select from '@mui/joy/Select';
import Option from '@mui/joy/Option';
import IconButton from '@mui/joy/IconButton';
import CloseRounded from '@mui/icons-material/CloseRounded';

export default function SelectClearable() {
  const [value, setValue] = React.useState(['dog']);
  const action = React.useRef(null);
  return (
    <Select
      action={action}
      value={value || []}
      multiple
      placeholder="Favorite pet…"
      onChange={(e, newValue) => setValue(newValue)}
      {...(value && {
        // display the button and remove select indicator
        // when user has selected a value
        endDecorator: (
          <IconButton
            size="sm"
            variant="plain"
            color="neutral"
            onMouseDown={(event) => {
              // don't open the popup when clicking on this button
              event.stopPropagation();
            }}
            onClick={() => {
              setValue(null);
              action.current?.focusVisible();
            }}
          >
            <CloseRounded />
          </IconButton>
        ),
        indicator: null,
      })}
      sx={{ minWidth: 160 }}
    >
      <Option value="dog">Dog</Option>
      <Option value="cat">Cat</Option>
      <Option value="fish">Fish</Option>
      <Option value="bird">Bird</Option>
    </Select>
  );
}

[siriwatknp]

Thanks for reporting the issue! Joy UI development is temporarily on hold as the maintainers focus on the next two major releases of Material UI