Material-UI场景下点击输入框时保持社交按钮聚焦状态的问题咨询

问题描述 #

现有Material-UI对话框效果如下：

点击输入框时，已选中的社交按钮会丢失高亮效果，失焦效果如下：

问题原因 #

当前为社交按钮添加的选中高亮效果是通过CSS的:focus伪类实现的，该伪类仅在元素持有页面焦点时生效。点击输入框时页面焦点会切换到输入框，按钮自然会丢失焦点，对应的高亮样式也就消失了。

解决方案 #

不要依赖原生焦点状态控制选中高亮，改用已经在维护的socialPlatform状态来控制样式，具体修改如下：

1. 修改样式定义 #

把高亮样式从:focus伪类移到独立的激活类名下，同时可以保留:focus的样式保证键盘操作的可访问性：

export const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    socialButton: {
      // 保留focus样式适配键盘导航场景
      '&:focus, &.active': {
        boxShadow: `0 0 0 0.1rem ${theme.palette.primary.main}`,
      },
    },
  }),
);

2. 修改SocialButton组件 #

新增active属性用来接收激活状态，动态拼接类名：

export const SocialButton = (props: SocialButtonProps & {active?: boolean}) => {
  const classes = useStyles();
  return (
    <IconButton
      centerRipple={true}
      className={`${classes.socialButton} ${props.active ? 'active' : ''}`}
      size="small"
      onClick={props.onClick}
      aria-label="add"
      component="span"
      disableRipple
    >
       {props.icon}
    </IconButton>
  );
};

3. 修改组件调用逻辑 #

给每个SocialButton绑定对应的激活判断条件，和存储的选中平台状态关联：

<Grid container>
  <Grid item>
    <SocialButton
      icon={<BehanceLogo />}
      onClick={() => setSocialPlatform('behance')}
      active={socialPlatform === 'behance'}
    />
    {/* 其余社交按钮同理，修改对应判断值即可 */}
  </Grid>
</Grid>

修改完成后，按钮的选中高亮会和维护的socialPlatform状态绑定，不会因为焦点切换到输入框就消失。

内容的提问来源于stack exchange，提问作者Marinescu