material-ui [joy-ui][List Item Button] The select prop renders differently on different browsers and viewports

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

重复问题

  • 我搜索了现有的问题

最新版本

  • 我测试了最新版本

重现步骤 🕹

链接到实时示例: https://mui.com/joy-ui/getting-started/templates/order-dashboard/
步骤:

<ListItemButton  selected>
  {item?.icon}
  <ListItemContent>
    <Typography level="title-sm">{item.label}</Typography>
  </ListItemContent>
</ListItemButton>

当前行为 😯

当我聚焦在浏览器的窗口时,它会移除选择,
当我移开对浏览器窗口的焦点时,它会返回选择。
此外,当我缩小窗口的大小时,它会返回选择,而当我最大化它时,它会移除选择。
在Firefox、Google Chrome和Brave浏览器中的行为是不同的。
这导致了意料之外的行为,因为我已经在3台不同的计算机上尝试过。结果发现这里一定存在某种错误。

预期行为 🤔

无论平台和情况如何,当提供 select 属性时,选择应该是可见的。

上下文 🔦

我在3个不同的浏览器上尝试过,它们总是导致不同的行为,我也在不同的视口上尝试过。
我注意到了一些事情,当你启用暗黑模式时,选择将是可见的,问题只存在于亮模式中。

你的环境 🌎

npx @mui/envinfo

System:
    OS: Linux 5.15 Linux Mint 21.2 (Victoria)
  Binaries:
    Node: 21.4.0 - ~/.nvm/versions/node/v21.4.0/bin/node
    Yarn: Not Found
    npm: 10.2.4 - ~/.nvm/versions/node/v21.4.0/bin/npm
  Browsers:
    Chrome: 120.0.6099.129
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.3 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.24 
    @mui/core-downloads-tracker:  5.15.2 
    @mui/icons-material: ^5.14.18 => 5.14.18 
    @mui/joy: ^5.0.0-beta.15 => 5.0.0-beta.15 
    @mui/material: ^5.15.2 => 5.15.2 
    @mui/private-theming:  5.15.2 
    @mui/styled-engine:  5.15.2 
    @mui/system:  5.15.2 
    @mui/types:  7.2.11 
    @mui/utils:  5.15.2 
    @mui/x-date-pickers: ^6.18.6 => 6.18.6 
    @types/react: ^18 => 18.2.39 
    react: ^18 => 18.2.0 
    react-dom: ^18 => 18.2.0 
    typescript: ^5 => 5.3.2
o2rvlv0m

o2rvlv0m1#

我认为这个问题与我们无关,因为我们使用纯CSS来设置选中状态的样式,所以我将此标记为外部依赖。

相关问题