Comments (8)
Hi,
Please provide debug info about siblings sorted so we can inspect their coordinates.
The algorithm is quite straightforward, it sorts based on main axis first, then by the secondary axis. It is also possible that your elements overlap with each other.
So far it is quite hard to understand the problem since it works fine in all our apps, as well as the sandbox App.js and App example with boxes with random coordinates.
from react-spatial-navigation.
After some debugging sessions, I found out that the problem is caused by the function sortSiblingsByPriority.
When I press RIGHT, the array which comes out from this function is sorted wrongly in some cases:
the element which is really at the right of the current focused element, is not the 1st.
Thanks
Marco
from react-spatial-navigation.
I found same problem. Create for example FlatList. Then when Element is focused I added transform: scale(1.2). Elements in that scenario are overlapping to each other and this bug occurs. @asgvard
from react-spatial-navigation.
Hi.
Scaling of the element does not change its "real" size or position, it should not impact the logic of the calculation of coordinates. When you use translateX or translateY - it also doesn't impact real coordinates. With the FlatList though - I would assume you have a different issue. FlatList wraps each item into another View (or React.Fragment, I don't remember). And this extra layer of the wrapper might break the calculation of the coordinates for each item. Please try to use "debug: true" mode and see the output of which children elements are suggested to get the next focus and which coordinates do they have.
from react-spatial-navigation.
@asgvard
item-18 is missing in calculations:
from react-spatial-navigation.
Also - each element have margin-left - maybe that is the case?
from react-spatial-navigation.
Is this happening after the lazy rendering of the new FlatList items? E.g. after you scrolled far enough past the initial visible chunk of the FlatList? I remember we had similar issues when we tried to use FlatList, and it was due to it creating and removing items on the fly. So it could be that the "old" items having their coordinates to be obsolete at the time when it adds or removed new items during scrolling. First I would try to remove scaling and any other extra styles that could affect this and see how it works then to isolate the issue. Also I would try to go right and then left again and see if it skips this specific item consistently. In the other words, is this behavior occurs only for some specific item, or it's just "random" every time? For now it's hard to say since I can't see every sibling element coordinates.
from react-spatial-navigation.
Ok, I found problem my problem - margin-left was passed to too deep element.
from react-spatial-navigation.
Related Issues (20)
- CSS gap:0 breaks navigation HOT 1
- Focus lost when Item Removed HOT 4
- Sometimes navigation doesn't work after go back to previous screen HOT 1
- a vulnerability CVE-2020-15168 is introduced in @noriginmedia/react-spatial-navigation HOT 2
- Focuses the second item in the list, after navigating from the fixed menu HOT 2
- Performance/Crash issue when load multiple rails and hold arrow keys to navigate HOT 1
- [Question]Can I use this package in a ReactJS project? HOT 4
- Focusable items hidden are able to be accessed. HOT 19
- withFocusable usage with forwardRef HOT 9
- Understanding of roadmap for library HOT 5
- more than 100 UI elements in funcational component taking too long to navigate. HOT 1
- 2-Directional Grid-type Items HOT 1
- display none control HOT 2
- Focus gets lost in case of collision HOT 3
- Track Child not recognizing children
- RTL is not supported
- Loss of focus when a component is rendered HOT 2
- Error when Server Side Rendering HOT 1
- Focusable elements not recognised when layout is position absolute HOT 5
- How should I handle focus when opening/closing a pop-up? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-spatial-navigation.