Consider: bubbling select event when clicking with a pointer device
jamesplease opened this issue Β· comments
Pointer device support in this lib is, admittedly, a bit less solid than keyboard support. Atm it looks like the onSelected
event doesn't bubble when clicking on a FocusNode.
Todo:
- Verify that this is true
- Decide if it should bubble or not in this situation
- Make any necessary changes based on the above
It's true (CodeSandbox), as it is triggered inside the FocusNode itself via an bound onClick function handler onto the elementType (Here)
To make this work, it should rely upon bubbleKey(store, 'select');
passing some other params maybe to identify the source of event(?) (maybe could be useful to receive this information inside the callback)
In my opinion, if the onSelected
gets triggered I assume that so happens despite of the event that triggers the selection.
Otherwise, a new specialized "onClicked" callback should be added.
Currently this library mimics DOM event's behavior (Thanks @giankd for the demo HERE) so it appears to me that every event, despite of its source bubbles the dom tree up to the document
It's true (CodeSandbox), as it is triggered inside the FocusNode itself via an bound onClick function handler onto the elementType (Here)
Thanks for looking into this!
To make this work, it should rely upon
bubbleKey(store, 'select');
passing some other params maybe to identify the source of event(?) (maybe could be useful to receive this information inside the callback)
π Re: source, see #66
In my opinion, if the
onSelected
gets triggered I assume that so happens despite of the event that triggers the selection. Otherwise, a new specialized "onClicked" callback should be added.
Hmmm, I'm not sure I follow. Would you mind rephrasing this sentence?
Currently this library mimics DOM event's behavior (Thanks @giankd for the demo HERE) so it appears to me that every event, despite of its source bubbles the dom tree up to the document
π
In my opinion, if the
onSelected
gets triggered I assume that so happens despite of the event that triggers the selection. Otherwise, a new specialized "onClicked" callback should be added.Hmmm, I'm not sure I follow. Would you mind rephrasing this sentence?
Sure!
When (as a library user) i implement my custom onSelected
on a specific node i expect that it will be called when a FocusNode, or one of its children gets selected.
Now, assume that i read about the pointerEvents prop inside the FocusRoot's docs.
"Cool stuff! I'll just pop this boolean inside the focus root and i'm set!"
In my DOM composition (as per @giankd sandbox) this may lead to trigger only the specific node that implements onSelected
to be called, without bubbling, making the lib behavior different from using pointer event or key events
I hope I've made myself clear now
I'm sorry, my english is not that good π
Super clear. That does make sense π Thank you for elaborating!
Update: the reason that I manually did this rn is that the current bubbleKey
bases it off of what's in focus. This works for remote input, because when you press Enter
the source is always the leaf focused node.
However, you can click anywhere on the screen, so the source could be different.
Supporting this will require:
- a function to generate an arbitrary hierarchy from a focus node
- being able to optionally pass the hierarchy into
bubbleKey
, to bubble events up an arbitrary hierarchy - calling this in
onClick
The existing computeFocusHierarchy
function is extremely tied to navigation. I'll need to give it a think whether it's appropriate for hierarchy computation outside of nav.
Note for myself in case I ever need it later:
// Computing the focus hierarchy within `onClick` of a FocusNode
const currentFocusState = store.getState();
const focusHierarchy = computeFocusHierarchy({
focusState: currentFocusState,
assignFocusTo: nodeRef.current.focusId
});