search

NoriginMedia / react-spatial-navigation

DEPRECATED. HOC-based Spatial Navigation. NEW Hooks version is available here: https://github.com/NoriginMedia/norigin-spatial-navigation
MIT License
226 stars 64 forks source link

Focusable elements not recognised when layout is position absolute #97

Closed stuartflanagan closed 2 years ago

stuartflanagan commented 3 years ago

Describe the bug Elements positioned absolutely do not seem to be discovered and are not focusable via smart navigation

To Reproduce Layout a set of focusable elements with absolute position via CSS try to navigate from one absolute position element to the next.

Expected behavior Smart Navigate moves to closest focusable item on navigation

Screenshots If applicable, add screenshots to help explain your problem.

Additional context Add any other context about the problem here.

asgvard commented 3 years ago

Hi,

We would need more info about the specific scenario, screenshots etc. Is this absolute positioned element overlapping another one? If so, then yes, it is expected that it won't navigate to it as the coordinates are only calculated within one "layer" if it makes sense. We have quite a few use cases of modals in our apps and we can suggest how to solve them. But in general, the navigation system is working with the hierachy/layers only, so it will only navigate within one focusable parent, then will try to jump one layer above. But if the coordinates overlap, then it won't recognize the modal components as siblings.

stuartflanagan commented 3 years ago

The elements are not overlapped. If I modify the measureLayout Method to use BoundingBox to measure I see it working again though. I will upload a screen shot soon.

stuartflanagan commented 3 years ago

We are animating these elements with framer motion. I think the combination of position absolute and the animation in some cases using transform is the issue here.

tobywisener commented 3 years ago

I have observed the same issue. Our elements in question are positioned using CSS transform, therefore the offsetLeft property that measureLayout uses is always going to be 0. We have forked for now and put in an override to use BoundingBox if offsetLeft & offsetTop are 0 but boundingRect.left / top is not.

asgvard commented 2 years ago

Hello. We have migrated this library to TS and Hooks: https://github.com/NoriginMedia/Norigin-Spatial-Navigation We are also using getBoundingClientRect for measurements now, which might help with this issue you were having.

Closing this due to inactivity and assuming this library is deprecated.