Allow for `onArrowPress` to have next focused node as property of KeyPressDetails
cyan-2048 opened this issue · comments
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).
Thanks for the idea @cyan-2048, we'll have a look as soon as we can!