EuiButtonIcon isLoading breaks EuiTooltip onBlur hide behavior

[kapral18]

Describe the bug
If EuiButtonIcon has isLoading that is changing after click on the button the wrapping EuiToolTip stops hiding on blur.

Impact and severity
Every single EuiButtonIcon wrapped in EuiToolTip.
Specific UI that gets affected is new DataQuality dashboard introduced in 8.16 with new custom action table item index check button icon.

Environment and versions

• EUI version: 95.9.0
• React version: 17.0.2
• Kibana version (if applicable):8.15
• Browser: Arc, Chrome, Firefox (everywhere)
• Operating System: MacOS 14.6.1

To Reproduce
Steps to reproduce the behavior:

1. Click an EuiButtonIcon.
2. Wait until a loader happens
3. Hover away and click somewhere else
4. See the tooltip not disappear
   Expected behavior
   Tooltip should disappear

Minimum reproducible example

import React, { useState, useCallback } from "react";
import { EuiToolTip, EuiButtonIcon } from "@elastic/eui";

export const Demo = () => {
  const [isLoading, setIsLoading] = useState<boolean>(false);

  const handleLoad = useCallback(() => {
    setIsLoading(true);

    setTimeout(() => {
      setIsLoading(false);
    }, 200);
  }, [setIsLoading]);

  return (
    <EuiToolTip content={"Check index"}>
      <EuiButtonIcon
        iconType="refresh"
        aria-label={"Check index"}
        isLoading={isLoading}
        onClick={handleLoad}
      />
    </EuiToolTip>
  );
};

Minimum reproducible sandbox
codesandbox link

Screenshots
https://github.com/user-attachments/assets/25a6236b-ccff-4ad3-abc9-f55ba0c926ed
(23rd second when clicking away from focused button, tooltip stays)

[cee-chen]

This has been reported previously: #6488

Unfortunately the answer is still essentially the same: EUI cannot detect any event when buttons are disabled at a React level: facebook/react#9142

#5666 would resolve this issue by not truly disabling buttons, but we don't have an ETA for this work although we do want to do it.

In the interim, one option would be to conditionally wrap your tooltip based on disabled status:

const sometimesDisabledButton = (
  <EuiButton disabled={isDisabled}>
    Button
  </EuiButton>
);

return (
  <>
    {isDisabled ? (
      sometimesDisabledButton
    ) : (
      <EuiToolTip content="Tooltip content">
        {sometimesDisabledButton}
      </EuiToolTip>
    )}
  </>
)

[kapral18]

hey @cee-chen thanks for the workaround.