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
UI Infrastructure: Focus Management #169
Comments
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);
};
}; |
Would I have to implement a focusable sub-class, make sure node extends it and the use that for type parameters? |
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
This would decouple the dependency tree - because the node wouldn't need to care about focus management, the only concern the Still a little vague, but hopefully that helps give some ideas. Thanks for thinking about this! |
I've open #199 . That implements the basic functionality required for focus management. |
Maybe we can update this issue to indicate what's already done and what's missing? |
Managing focus for text input is critical for useful interactive applications. In general, clicking on a text input should grant it focus. In addition, other elements may be 'focusable' for accessibility, like buttons.
Revery should provide an intuitive, React-like interface for working with focus, that is familiar for web developers using React.
Focus is an inherently stateful concept - for a basic scenario, we can keep track of focus at the
node
level. Our 'focus manager' could essentially keep track of the focused node via aref
.Proposal
Internally, we need to:
Focus
module that keeps track of the actively focused node. When that actively focused node changes, it should dispatchfocus
andblur
events to the respective nodes.For our Nodes, we need to:
.focus()
and.blur()
methods. These would be available via theref
introduced in API: Add 'ref' for primitives for direct access to Node #139On our JSX side, we need to:
tabindex
field which, for now, is simply a proxy for whether or not it is focusable. Later, when there is more focus on keyboard accessibility, we can extend this to behave as the browser (ie, for tab-key flow)onFocus
andonBlur
event for nodes. This should be added to ourNodeEvents
module and dispatched at the proper time.This lays the groundwork for a simple focus management story. Once we have this in place, we can start 'funneling' the keyboard input to the focused element. Key for implementing apps that need forms!
Testability
.focus
on a node withouttabindex
should not change focus.blur
on a node withtabindex
should cause no node to have focus.focus
on a node withtabindex
set should change focusonBlur
is triggered for the previous element, andonFocus
is triggered for the new element).The text was updated successfully, but these errors were encountered: