useOverlayPosition issues

[WildEgo]

Hey guys I found this package/library not long ago, I finally had some time to implement it on my current project and I found 2 issues them being:

1. On first click of any component that opens the overlay the item straight up jumps to the top left of the screen.
2. On any resize and viewport change that doesn't use a width of 100% (Anything with breakpoints that changes max-width) will cause it to not recalculate its place.

It could be my implementation and if so I'd happily provide snippets of my code to try and help u and me figure what the problems are.

Thanks in advance,
Luis Bizarro.

[conor909]

Im not sure if this is related to this issue, but I'm trying to use this package with native-base in an expo environment. For react-native-web, it references the npm package dom-helpers. In the calculatePosition.js file it tried to import the following at the top of the file:

import getCss from 'dom-helpers/query/style';
import getOffset from 'dom-helpers/query/offset';
import getPosition from 'dom-helpers/query/position';
import getScrollLeft from 'dom-helpers/query/scrollLeft';
import getScrollTop from 'dom-helpers/query/scrollTop';
import ownerDocument from 'dom-helpers/query/ownerDocument';

This files don't seem to exist in the dom-helpers package. Most of the above files live within the root, so dom-helpers/ownerDocument etc.

Is it referencing an older version of dom-helpers ?

[WildEgo]

Im not sure if this is related to this issue, but I'm trying to use this package with native-base in an expo environment. For react-native-web, it references the npm package dom-helpers. In the calculatePosition.js file it tried to import the following at the top of the file:

import getCss from 'dom-helpers/query/style';
import getOffset from 'dom-helpers/query/offset';
import getPosition from 'dom-helpers/query/position';
import getScrollLeft from 'dom-helpers/query/scrollLeft';
import getScrollTop from 'dom-helpers/query/scrollTop';
import ownerDocument from 'dom-helpers/query/ownerDocument';

This files don't seem to exist in the dom-helpers package. Most of the above files live within the root, so dom-helpers/ownerDocument etc.

Is it referencing an older version of dom-helpers ?

I am not sure, it seems to be requiring 3.3.1, in any way I'd really hope someone at GeekyAnts could check this out, it's been bothering me for a while, the 2nd point only seems to happen from time to time but the first point is making my overlay to open on the top left every single time at the first opening

[intergalacticspacehighway]

@WildEgo @conor909 Could you please share a reproducible demo with a repo? Will take a look.

[WildEgo]

@WildEgo @conor909 Could you please share a reproducible demo with a repo? Will take a look.

I have mitigated this using your "react-native-popper" package, it makes it so it's only a bit weird on the first start of any instance and then all other instances appear on the correct place no matter what, the resizing also breaks sometimes but I'm sure that's just because of my media queries, so at the moment this is no longer a problem for me.

[conor909]

@intergalacticspacehighway I think my issue was related to some dependency versions. If it crops up again I'll set up a more detailed issue.

[intergalacticspacehighway]

@WildEgo the popper library does simplify this entire thing. Issue is due to the async calculation nature of layout in Views. Check this out If you still want to use the hook.
I am closing this issue now, feel free to open a new one if needed :)