Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow for onArrowPress to have next focused node as property of KeyPressDetails #117

Open
cyan-2048 opened this issue Jan 31, 2024 · 1 comment
Labels
enhancement New feature or request

Comments

@cyan-2048
Copy link

cyan-2048 commented Jan 31, 2024

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>

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>

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).

@predikament
Copy link
Collaborator

Thanks for the idea @cyan-2048, we'll have a look as soon as we can!

@predikament predikament added the enhancement New feature or request label Jan 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants