Tooltip throws "Cannot convert undefined or null to object" at Tooltip._isWithActiveTrigger

[karendolan]

Existing Bootstrap Issue ticket contains workarounds: twbs/bootstrap#37474
that might be implemented in https://github.com/harvard-edtech/dce-reactkit/blob/main/src/components/Tooltip.tsx#L77-L83

It seems to be a race condition between Tooltip hide() and and dispose(). The race condition happens relatively frequently, maybe 5-10% of the time. It's uncaught, so an ugly stack trace is shown and page has to be refreshed to bring back the app.

To Duplicate: Open a dce-reactkit Tooltip and change views to cause the tooltip to hide/dispose itself at the same time. Continue until the error appears.

Error:

 Uncaught TypeError: Cannot convert undefined or null to object
at Object. values (<anonymous>)
at Tooltip._isWithActiveTrigger (bootstrap.esm. js: 3558:1)
at Tooltip._leave (bootstrap.esm.js: 3543:1)
at complete (bootstrap.esm.js: 3315:1)
at execute (bootstrap.esm.]s: 249:1)
at HTMLDivElement.handler (bootstrap.esm.js:267:1) at triggerTransitionEnd (bootstrap.esm.js: 122:1)

[karendolan]

Related Issue Cannot read properties of undefined (reading 'trigger') at Tooltip._setListeners. That also seems to appear when tooltip show/hide/dispose occur at the same time.

[karendolan]

The possible solution from twbs/bootstrap#37474 (comment)

From:

      // Clean up tooltip
      return () => {
        if (t) {
          t.dispose();
        }
      };
    },

To:

      // Clean up tooltip
      return () => {
        if (t) {
          await t.dispose();
          // workaround for https://github.com/twbs/bootstrap/issues/37474
          t._activeTrigger = {};
          // Does this leave a lot of garbage in the document??
          t._element = document.createElement('noscript'); // placeholder with no behavior
        }
      };
    },

[EDITTED] don't need the proceeding hide() and details on why the other 2 lines are needed after dispose
Note in boostrap repo
@karendolan IIRC calling hide() is not necessary. The problem occurs when hide() has been called shortly before dispose() is called and/or the element is removed from the DOM, because hide waits for the CSS transition duration to elapse before completing its work.

Those two extra lines to re-initialize the _activeTrigger and _element attributes are necessary after calling dispose(), in order to avoid a Javascript error in the delayed work of the hide function.