fix(ui-tooltip): ensure Esc key closes only the Tooltip when inside a…

[ToMESSKa]

… Modal
Closes: INSTUI-4393

ISSUE: When a ToolTip is inside of a Modal and closed by Esc key, the Modal closes too.

TEST PLAN:

• use the example below
• Click on the 'Open the modal" button
• hover over the Tooltip
• press Esc when the Tooltip is still shown
• the Tooltip should be closed but the containing Modal not
• pressing the Esc again should close the modal too
• other Tooltip examples should work as expected without errors and should close on Esc

const Example = () => {
  const [open, setOpen] = useState(false);

  const handleButtonClick = () => {
    setOpen((state) => !state);
  };

  const renderCloseButton = () => {
    return (
      <CloseButton
        placement="end"
        offset="small"
        onClick={handleButtonClick}
        screenReaderLabel="Close"
      />
    );
  };

  return (
    <div style={{ padding: "0 0 11rem 0", margin: "0 auto" }}>
      <Button onClick={handleButtonClick}>
        {open ? "Close" : "Open"} the Modal
      </Button>
      <Modal
        open={open}
        onDismiss={() => {
          setOpen(false);
        }}
        size="auto"
        label="Hello World"
        shouldCloseOnDocumentClick
      >
        <Modal.Header>
          {renderCloseButton()}
          <Heading>Hello World</Heading>
        </Modal.Header>
        <Modal.Body>
          <Tooltip
            renderTip="Hello. I'm a tool tip"
            placement="start"
            on={["click", "hover", "focus"]}
          >
            <IconInfoLine />
          </Tooltip>
        </Modal.Body>
      </Modal>
    </div>
  );
};

render(<Example />);

[github-actions]

PR Preview Action v1.6.0
Preview removed because the pull request was closed.
2025-02-03 14:30 UTC

[matyasf]

nice work! I've tested with a few examples including the tricky one at https://instructure.design/pr-preview/pr-1850/#focus-management and it works well :)
Please @balzss test it thoroughly, this is able to mess up things

[balzss]

works well and the change makes sense, great job