material-ui Bug:在Select组件中点击清除选择按钮后,选项会视觉上被选中,

brtdzjyr  于 4个月前  发布在  其他
关注(0)|答案(1)|浏览(36)

相关页面

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

问题类型

损坏的演示

问题描述

JoyUI的Select组件在清除操作示例中存在一个bug。当我使用清除选择按钮时,选定的值被按预期移除。然而,当我再次打开选项菜单时,之前选择的选项仍然以选中的形式视觉上显示。

重现步骤:

  1. 转到带有清除选择按钮的Select组件示例页面。
  2. 在Select中选择一些选项。
  3. 点击按钮以清除选择。
  4. 再次打开Select选项菜单。

预期行为:

在点击清除选择按钮后,之前选择的选项不应以选中的形式视觉上显示。

当前行为:

在点击清除选择按钮后,之前选择的选项仍然以选中的形式视觉上显示,尽管它们不再被选中。

上下文

在实现Select all选项时,我意识到在选择了所有选项后,效果没有正确应用。

搜索关键词: UI,视觉错误,清除选择

sg2wtvxw

sg2wtvxw1#

@AugustoAmaral 我没有看到描述中的问题。
即使有多个选择,也没有问题。
多个选择的示例:

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

相关问题