CODEWITHSUNDEEP
reactjsmaterial-uitooltip
Juliano Costa
Juliano Costa

Reputation: 523

Material-UI Tooltip automatically opens (displays unexpectedly) after button got enabled

I suppose that the state change of the button (enabled or disabled) is causing the issue. I have 5 action buttons (create, delete, edit, save and cancel). All buttons start disabled except the Create button. When I click the Create button, it becomes disabled and the Save and Cancel buttons become enabled. When it occours, the Save or Cancel tooltip pops up. Sometimes both of them pop up, sometimes only one of them pops up. At the first time, I thought that it was happening in response to focus events. Then I try to disable the tooltip response to focus events setting disableTriggerFocus={true}, but it doesn't work.

Here's the code for ActionButton:

import Tooltip from "@material-ui/core/Tooltip";

const ActionButton = ({ buttonIcon, onClick, disabled, tooltip }) => {
  return (
    <>
      <Tooltip
        title={disabled ? "" : tooltip}
        placement="top"
        arrow
        disableTriggerFocus={true}
      >
        <Button onClick={onClick} disabled={disabled}>
          <ButtonIcon tag={buttonIcon} />
        </Button>
      </Tooltip>
    </>
  );
};

Edit ActionButtonsPainel

Upvotes: 4

Views: 4032

Answers (1)

Ryan Cogswell
Ryan Cogswell

Reputation: 81156

The triggering of the tooltip for hovering is based on the mouseOver and mouseLeave events. mouseOver events get triggered for disabled buttons, but mouseLeave events do not. When you hover over a disabled button it triggers opening the tooltip, but when you leave the disabled button the mouseLeave event is not triggered so the tooltip stays open.

You have code (title={disabled ? "" : tooltip}) that suppresses the tooltip text when it is disabled, but the tooltip still thinks it is "open". Then when you enable the button, the text of the tooltip is restored and immediately displays. So which buttons this occurs on depends on which disabled buttons you happened to hover over while they were disabled.

You can fix this by explicitly controlling the open state of the Tooltip using the open, onOpen, and onClose properties. onOpen fires when Tooltip thinks it should open and onClose fires when Tooltip thinks it should close, but you can combine this information with additional information (e.g. the disabled state) to decide on the value of the open property.

Below is a working version of ActionButton. The useEffect call is to handle the case where the tooltip is open as you click on the button. If the button is disabled by the click, then onClose won't fire when leaving the button since the mouseLeave event won't be triggered for the disabled button, so the effect handles closing the tooltip in that case.

import Tooltip from "@material-ui/core/Tooltip";
import { useState, useEffect } from "react";

const ActionButton = ({ buttonIcon, onClick, disabled, tooltip }) => {
  const [open, setOpen] = useState(false);
  useEffect(() => {
    if (disabled && open) {
      setOpen(false);
    }
  }, [disabled, open]);
  return (
    <>
      <Tooltip
        title={tooltip}
        placement="top"
        arrow
        onOpen={() => {
          if (!disabled) {
            setOpen(true);
          }
        }}
        onClose={() => setOpen(false)}
        open={open}
      >
        <Button onClick={onClick} disabled={disabled}>
          <ButtonIcon tag={buttonIcon} />
        </Button>
      </Tooltip>
    </>
  );
};

Edit ActionButtons

Related answers:

Upvotes: 5

Related Questions