I am using Tooltip component from MUI in my customized TooltipComponent. TooltipComponent works similar to Dialog: user can see some content pop up after clicking (not hovering) on element (div with a text “CLICK” in my case). This content pop up consists of some text and an “x” icon, by clicking “x” icon it’s possible to close tooltip. I added two events: onClick and onKeyPress, they both do the same thing – open popup content.
For accessibility needs, when pop up content is open I have a requirement to set a focus on “x” icon. I’m doing it in React by using ref. I succeded to do it with onKeyPress event, and I expected that the same code works fine for onClick event, but it’s not works. Not only I cannot set a focus after firing onClick, but for some reason the pop-up window opens and closes immediately without my intervention (according to the logic of the code, the pop-up window can be closed only after pressing “x”)

Why the same code works perfect for onKeyPress and not works for onClick? And how resolve this problem for onClick?
I appreciate any help.

Here’s the code of my custom 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;