slmgc / react-hint

Tooltip component for React, Preact, Inferno
https://react-hint.js.org/
MIT License
335 stars 28 forks source link

Infinite render loop when tooltip is on the right edge of the page #52

Open srmagura opened 3 years ago

srmagura commented 3 years ago

CodeSandbox here

import ReactHintFactory from "react-hint";
const ReactHint = ReactHintFactory(React);

export default function App() {
  return (
    <div>
      <ReactHint events />
      <div
        style={{
          minHeight: "100vh"
        }}
      >
        <div
          style={{
            padding: "1rem",
            backgroundColor: "hsl(0, 0%, 92%)",
            display: "flex",
            justifyContent: "flex-end"
          }}
        >
          <button data-rh="Add top-level category">OK</button>
        </div>
      </div>
    </div>
  );
}

Everything in this example besides the backgroundColor is necessary to reproduce the bug.

Error message when hovering over the button:

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at checkForNestedUpdates (react-dom.development.js:23803)
    at scheduleUpdateOnFiber (react-dom.development.js:21835)
    at Object.enqueueSetState (react-dom.development.js:12467)
    at ReactHint.Component.setState (react.development.js:365)
    at ReactHint.eval [as getHintData] (index.js:213)
    at ReactHint.componentDidUpdate (index.js:232)
    at commitLifeCycles (react-dom.development.js:20684)
    at commitLayoutEffects (react-dom.development.js:23426)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at commitRootImpl (react-dom.development.js:23151)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at commitRoot (react-dom.development.js:22990)
    at performSyncWorkOnRoot (react-dom.development.js:22329)
    at eval (react-dom.development.js:11327)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at scheduleUpdateOnFiber (react-dom.development.js:21893)
    at Object.enqueueSetState (react-dom.development.js:12467)
    at ReactHint.Component.setState (react.development.js:365)
    at ReactHint.eval [as getHintData] (index.js:213)
    at eval (index.js:77)

The above error occurred in the <ReactHint> component:

    at ReactHint (https://1z08p.csb.app/node_modules/react-hint/lib/index.js:30:31)
    at div
    at App

I will look into fixing it myself but help would definitely be appreciated!