jamesplease / lrud

A React library for managing focus in TV apps.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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:

  1. a function to generate an arbitrary hierarchy from a focus node
  2. being able to optionally pass the hierarchy into bubbleKey, to bubble events up an arbitrary hierarchy
  3. 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
          });