Keep the button focused when click on input: Material-Ui

user_13859497 0
Viewed 545

I have the next material-ui dialog:

enter image description here

But when I click on the input field the social button will defocus and I don't want that:

enter image description here

The button:

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

};

Style:

export const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    socialButton: {
      '&:focus': {
        boxShadow: `0 0 0 0.1rem ${theme.palette.primary.main}`,
      },
    },
  }),
);

Component:

      <Grid container>
        <Grid item>
          <SocialButton
            icon={<BehanceLogo />}
            onClick={() => setSocialPlatform('behance')}
          />
          ....
        </Grid>
      </Grid>
material-ui reactjs javascript
1 Answers

Simply create an "active" class with that same style and save state (using useState) of which button should be active.

You could do something like:

const [activeButton, setActiveButton] = useState(null)

...

if (activeButton === 'behance')
    behanceStyle = classes.active // Use useStyle to create the 'active' class
          
return (
    <SocialButton
        className={behanceStyle}
        icon={<BehanceLogo />}
        onClick={() => {
            setSocialPlatform('behance')
            setActiveButton('behance')
        }}
    />
  )
user_122886620
Related