Как всегда применять стиль focusVisible к сфокусированному компоненту кнопки Material-UI?

ButtonBase (который Button делегирует ) имеет свойство действия , которое предоставляет возможность установить видимость фокуса для кнопки.

ButtonBase использует для этого хук useImperativeHandle. Чтобы использовать его, вы передаете ссылку в реквизит action, а затем можете позже вызвать actionRef.current.focusVisible().

Однако этого самого по себе недостаточно, потому что есть несколько событий мыши и касания, которые ButtonBase прослушивает , чтобы запустить/остановить пульсацию. Если вы используете реквизит disableTouchRipple, он предотвращает попытки ButtonBase запустить/остановить пульсацию на основе этих событий.

К сожалению, disableTouchRipple предотвращает анимацию нажатия и касания кнопки. Их можно восстановить, явно добавив еще один элемент TouchRipple, которым вы управляете. В моем примере ниже показана обработка onMouseDown и onMouseUp в качестве доказательства концепции, но идеальное решение будет иметь дело со всеми различными событиями, которые обрабатывает ButtonBase.

Вот рабочий пример:

import React from "react";
import Button from "@material-ui/core/Button";
import TouchRipple from "@material-ui/core/ButtonBase/TouchRipple";

const FocusRippleButton = React.forwardRef(function FocusRippleButton(
  { onFocus, onMouseDown, onMouseUp, children, ...other },
  ref
) {
  const actionRef = React.useRef();
  const rippleRef = React.useRef();
  const handleFocus = (event) => {
    actionRef.current.focusVisible();
    if (onFocus) {
      onFocus(event);
    }
  };
  const handleMouseUp = (event) => {
    rippleRef.current.stop(event);
    if (onMouseUp) {
      onMouseUp(event);
    }
  };
  const handleMouseDown = (event) => {
    rippleRef.current.start(event);
    if (onMouseDown) {
      onMouseDown(event);
    }
  };
  return (
    <Button
      ref = {ref}
      action = {actionRef}
      disableTouchRipple
      onFocus = {handleFocus}
      onMouseDown = {handleMouseDown}
      onMouseUp = {handleMouseUp}
      {...other}
    >
      {children}
      <TouchRipple ref = {rippleRef} />
    </Button>
  );
});
export default function App() {
  return (
    <div className = "App">
      <FocusRippleButton variant = "contained" color = "primary">
        Button 1
      </FocusRippleButton>
      <br />
      <br />
      <FocusRippleButton
        variant = "contained"
        color = "primary"
        onFocus = {() => console.info("Some extra onFocus functionality")}
      >
        Button 2
      </FocusRippleButton>
    </div>
  );
}

Мы можем создать ссылку на action компонента material-ui Button и использовать ссылку на действие внутри useLayoutEffect для достижения волнового эффекта.

import React, { createRef, useLayoutEffect } from "react";
import Button from "@material-ui/core/Button";

function FocusButton(props) {
  const { handleClose } = props;

  const actionRef = createRef();

  useLayoutEffect(() => {
    if (actionRef.current) {
      actionRef.current.focusVisible();
    }
  }, []);

  return (
    <Button action = {actionRef} onClick = {handleClose}>
      Ok
    </Button>
  );
}

Вышеприведенный FocusButton можно использовать в качестве замены Button или просто добавить ссылку и вызвать focusVisible() в методе триггера.

Например:

const buttonRef = createRef();

const handleButton2Click = () => {
    buttonRef.current.focusVisible();
};

.
.
.
.

<Button action = {buttonRef} variant = "outlined">
        Button 1
</Button>

<Button variant = "outlined" color = "primary" onClick = {handleButton2Click}>
        Button 2
</Button>

Вы можете найти демо по этой ссылке