UI Infrastructure: Focus Management

[revery-ui]

UI Infrastructure: Focus Management

[WhoAteDaCake]

Hi, I've begun working on this, however, as I am relatively new to ocaml/reason ecosystem, I am not sure how to implement the focus module. So far I have, but that would cause a dependency cycle.

module Make = (T: {type t;}) => {
  let focusedNode: ref(option(Node.node(T.t))) = ref(None);

  let focusOn = (node: Node.node(T.t)) => {
    let _ =
      switch (focusedNode^) {
      | None => ()
      | Some(node) => node#blur()
      };
    focusedNode := Some(node);
  };
};

[WhoAteDaCake]

Would I have to implement a focusable sub-class, make sure node extends it and the use that for type parameters?

[bryphe]

Thanks a lot for taking this on, @WhoAteDaCake !

That functor looks like a solid start - it looks like it'd be testable. Based on the dependency issue - I'm thinking it'd be nice if the Node didn't need to know about focus management. It could work the following way:

• The focus module keeps track of the active node
• Input events get funneled through the Focus module (we could implement a Focus.dispatch - like what we did for Mouse events here:

  revery/src/UI/Mouse.re

  Line 88 in 2ec9ecb

  let dispatch =

  - that logic finds the element under the cursor, and dispatches a mouse event (bubbling it up) - the focus module would want to do similiar bubbling, but the logic could actually be simpler than the mouse case - it would dispatch against the currently active node, if there is one).
• We could add Blur and Focus events to NodeEvents
• Instead of sending a Node object to the ref - we could send a more functional wrapper. This would contain a blur and focus method, which, under the hood, would call to the Focus module. This 'proxying' could be facilitated by wrapping the onRef in NodeEvents

This would decouple the dependency tree - because the node wouldn't need to care about focus management, the only concern the Node would have with regard to focus is respond to Blur and Focus events, and dispatching to the appropriate handler in NodeEvents.

Still a little vague, but hopefully that helps give some ideas. Thanks for thinking about this!

[WhoAteDaCake]

I've open #199 . That implements the basic functionality required for focus management.

[saitonakamura]

Maybe we can update this issue to indicate what's already done and what's missing?
Also, @bryphe , in Testability section first case should be most likely without tabindex instead of with