streakyc / react-float-anchor Goto Github PK

One use-case of react-float-anchor is to show a tooltip over another element. Some tooltip designs include an arrow from the tooltip to the original element. In order to place the arrow, you need to know how the tooltip was placed relative to the element. ReactFloatAnchor didn't provide a way to handle this at all before version 3.3.0.

In version 3.3.0, you can now pass a callback as the float prop which will receive the return value of contain-by-screen, which contains information (the "Choice" value) about how the float prop was positioned.

One problem with this is that contain-by-screen isn't called until after the initial render, so the initial render has to pass null to the float callback as the choice value, and then immediately re-render with the choice from contain-by-screen. (ReactFloatAnchor is smart enough to only do this immediate re-render when the user has passed a callback as the float prop, so users not using the feature aren't affected.)

This could be solved by having a separate "tooltip" prop which may be a function that takes a choice and returns a React node, and making it so this tooltip is only rendered after the float has been positioned.

It's also possible to make ReactFloatAnchor support positioning the tooltip itself, rather than just exposing the choice value from contain-by-screen and expecting the user to position the tooltip using that.

With StackBlitz and codesandbox, React 18 is now the default in react templates.

When trying to use react-float-anchor and react-18, Should not happen: portalEl already in page happens in this example from react-menu-list. https://stackblitz.com/edit/react-ts-xqmbow?file=App.tsx when the <input> element is focused.

Hi @agentme,

I'm fighting an issue with react-float-anchor on IE11, there's an uncaught exception fired here:

 this._portalRemoval.take(1).onValue(function () {
            portalEl.rfaAnchor = undefined;
            _this3.portal = null;
            _reactDom2.default.unmountComponentAtNode(portalEl);
            portalEl.remove();
            _this3._portalEl = null;
          });

=> Object doesn't support property or method 'remove' (from portalEl.remove();)
Explanation: https://stackoverflow.com/questions/20428877/javascript-remove-doesnt-work-in-ie

Would you consider patching it and make a test run on IE11?