Issue with navigating away from page that uses react-tooltip

[tonynd]

I am using the React-Tooltip on several inputs which uses the getContent property to update the data. I do have a problem where when the tooltip is shown and I navigate away from the page, getContent is still running an causes the following warning on the page I redirected to. Is it any possible way of turning of the setInterval in the React-Tooltip component?

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the ReactTooltip component.

Any help would be appreciated. Thanks!

Also, would really help, but is there any issue with the tooltip not displaying in Mozilla's Firefox? Its show and respond correctly in Chome, but I could not get it to show in Firefox.

[wwayne]

I suppose that you are using getContent([() => {}], interval)?

For another question, no one has reported tooltip doesn't work on Firefox, maybe you can show me some detail of your code, especially how you set the react-tooltip and what attributes you are using, and I can take a look?

[tonynd]

Yes, I am using getContent([() => {}], interval).

Here is an example input that I use for e-mail validation. Class name errorStatus is used to hide the tooltip when there is no error in the input field. Inspecting the elements in Firefox does show that the tooltip is being rendered.

export const emailCustomInput = (props) => {
  const errorStatus = _detemineInputStatus(props.id);
  return (
    <div>
      <input
        type="text"
        data-tip={props.id + "_tooltip"}
        data-for={props.id + "_tooltip"}
        id={props.id}
        value={props.value || ""}
        maxLength={props.schema.maxLength}
        onChange={(event) => props.onChange(event.target.value)}
      />
      <div className={errorStatus}>
        <ReactTooltip
          id={props.id + "_tooltip"}
          effect="solid"
          getContent={[() => _getErrorEmail(props.value), 500]}
          event="focusin"
          eventOff="blur"
        />
      </div>
    </div>
  );
};

Works fine in Chrome, but does not work in Firefox.

Thanks for the help!

[wwayne]

@tonynd Firefox doesn't work on focusin, so I would suggest you to use event='focus'.
And I've update the react-tooltip 3.1.6, hope it will solve your getContent problem

[tonynd]

@wwayne Awesome! Thanks for the help!
React-tooltip 3.1.6 fixed the getContent problem.