在触发 onClick 事件时无法将焦点设置在 Material UI 中的工具提示组件的内容上，但可以在触发 onKeyPress 事件时

Question

我在自定义的 TooltipComponent 中使用 MUI 中的 Tooltip 组件。 TooltipComponent 的工作方式与 Dialog 类似：用户在单击（而不是悬停）元素（在我的例子中带有文本“CLICK”的 div）后可以看到弹出的一些内容。该弹出内容由一些文本和一个“x”图标组成，通过单击“x”图标可以关闭工具提示。我添加了两个事件：onClick 和 onKeyPress，它们都执行相同的操作 - 打开弹出内容。 出于可访问性需求，当弹出内容打开时，我需要将焦点设置在“x”图标上。我在 React 中使用 ref 来做到这一点。我成功地使用 onKeyPress 事件做到了这一点，并且我预计相同的代码对于 onClick 事件可以正常工作，但它不起作用。不仅我在触发 onClick 后无法设置焦点，而且由于某种原因，弹出窗口在没有我干预的情况下立即打开和关闭（根据代码的逻辑，只有在按“x”后才能关闭弹出窗口） )

为什么相同的代码适用于 onKeyPress 而不适用于 onClick？那么如何解决 onClick 的这个问题呢？
我很感激任何帮助。

这是我的自定义 TooltipComponent 的代码：

import React, { useEffect, useRef, useState } from 'react';
import {Tooltip, ClickAwayListener} from '@mui/material';

function TooltipComponent() {  
 const [open, setOpen] = useState(false);   
 const toggleTooltip = () => setOpen(!open); 
 const closeTooltip = () => setOpen(false);  
 const myDivRef = useRef(null);

  useEffect(() => {
    if (myDivRef.current) {
      if(open){
        myDivRef.current.focus();
      }
    }}, [open]);

  const BodyWrapper = (
    <ClickAwayListener onClickAway={closeTooltip}>
      <div style={{ position: 'relative' }}>
        <div
          tabIndex={0}
          ref={myDivRef}
          onClick={closeTooltip}
          onKeyPress={closeTooltip}
          aria-description="close icon"
          style={{
            position: 'absolute',
            left: '-3px',
            top: '-3px',
            fontSize: '36px',
            fontWeight: 'light',
            cursor: 'pointer',
          }}
        >
          x
        </div>
        <div aria-description="tooltip content">
          <div style={{ padding: '24px', color: 'black' }}>
            Top - Start -{' '}
            <div>
              <a href="#">I am a link</a>
            </div>
          </div>
        </div>
      </div>
    </ClickAwayListener>   );

  return (
    <Tooltip
      title={BodyWrapper}
      arrow
      disableHoverListener={true}
      tabIndex={0}
      open={open}
      placement="bottom"
      onClose={closeTooltip}
      PopperProps={{
        disablePortal: true,
        role: 'dialog',
        'aria-live': 'polite',
      }}
    >
      <div
        onClick={toggleTooltip}
        onKeyPress={toggleTooltip}
        style={{
          display: 'inline-block',
          textAlign: 'center',
          cursor: 'pointer',
        }}
      >
        <div style={{ margin: '6px', color: 'black' }}>
          CLICK
        </div>
      </div>
    </Tooltip>   ); }

export default TooltipComponent;
  

Answer 1

您的函数可以工作，但由于您单击工具提示顶部的“X”，而工具提示本身还有另一个 onClick，因此事件会冒泡。两个 onClick 函数都可以工作并且您的工具提示将重新打开。试试这个：

const closeTooltip = (e) => {
  e.stopPropagation();
  setOpen(false)
}

相关文档：

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

Answer 2

尝试将 Tooltop 与按钮元素一起使用，而不是与具有 onClick 属性的 Div 元素一起使用。还可以使用 can you ref 属性检查是否有按钮按键事件。

return (
    <div>
      <Tooltip
        PopperProps={{
          disablePortal: true,
        }}
        onClose={handleTooltipClose}
        open={open}
        disableFocusListener
        disableHoverListener
        disableTouchListener
        title="Tooltip content"
      >
        <Button
          ref={buttonRef}
          onClick={toggleTooltip}
          onKeyPress={toggleTooltip}
        >
          Click or press Enter
        </Button>
      </Tooltip>
    </div>
  );

Answer 3

确实看起来添加disableFocusListener={true}足以解决我的问题，因为我正在覆盖组件的聚焦行为。 感谢大家