NoriginMedia
Allow for `onArrowPress` to have next focused node as property of KeyPressDetails
Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
It's a problem because that would mean I have to figure out myself which element would be focused next (this isn't a problem with https://github.com/luke-chang/js-spatial-navigation, where there's plenty of spatial navigation events present)
Describe the solution you'd like A clear and concise description of what you want to happen.
Just want a way to know what DOM Node or even React Component is about to take the focus
Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.
in the useFocusable hook, add a custom property that can be passed any object as an argument for onArrowPress
function ComponentA() {
const divRef = useRef();
const { ref } = useFocusable({
willFocus: { divRef, dontFocus: true }
})
return <div ref={(e) => { divRef.current = ref.current = e; }}>this element is about to be focused</div>
}
function ComponentB() {
const { ref } = useFocusable({
onArrowPress(direction, props, details) {
// I can do validation and other stuff, like check if the element needs to be scrolled
return !details.willFocus.dontFocus
}
})
return <div ref={ref}>this element is about to lose focus</div>
}
Additional context Add any other context or screenshots about the feature request here.
events fired by luke-chang/js-spatial-navigation that I really miss
sn:willunfocus
- bubbles:
true - cancelable:
true - detail:
- nextElement:
<HTMLElement>(Navigation Only) - nextSectionId:
<String>(Navigation Only) - direction:
'left','right','up'or'down'(Navigation Only) - native:
<Boolean>
- nextElement:
Fired when an element is about to lose the focus.
nextElement and nextSectionId indicate where the focus will be moved next.
direction is similar to sn:willmove but will be omitted here if this move is not caused by direction-related actions (e.g. by @ syntax or focus() directly).
native indicates whether this event is triggered by native focus-related events or not.
Note: If it is caused by native blur event, SpatialNavigation will try to focus back to the original element when you cancel it (but not guaranteed).
sn:willfocus
- bubbles:
true - cancelable:
true - detail:
- sectionId:
<String> - previousElement:
<HTMLElement>(Navigation Only) - direction:
'left','right','up'or'down'(Navigation Only) - native:
<Boolean>
- sectionId:
Fired when an element is about to get the focus.
sectionId indicates the currently focused section.
previousElement indicates the last focused element before this move.
direction and native are the same as sn:willunfocus.
Note: If it is caused by native focus event, SpatialNavigation will try to blur it immediately when you cancel it (but not guaranteed).
