Thoughts on managing focus?

[esnyder]

I'm working on a re-frame/re-com UI and feeling the pinch of not having baked in focus management. I see that focus management is one of the things listed in the "Missing Components" section of the README.

Before I go running off trying to build something like a bull in a china shop I was hoping to hear from anyone who has thought about the best way to approach an implementation.

In addition to tab/shift-tab doing sensible things, I am also looking to handle things like:

• When I have "form like" sets of [re-com/input]s, but where the button triggers an AJAX call via a re-frame/dispatch, I want hitting enter in earlier fields to advance focus to the next one, and have hitting enter in the last input field to trigger the same action as clicking the "submit" button equivalent.
• I'm working with a fork of re-com seeing about making some columns in simple-v-table editable. I want hitting enter in the editable fields to advance the focus in a sensible way, and to be able to have the arrow keys move focus around in sensible ways.

So, looking for any feedback from people who have thought about how to add focus management, or tried something, or have a pointer to any earlier discussions, or... anything, really :)

Thanks in advance.

[mike-thompson-day8]

First, there's these thoughts:
http://day8.github.io/re-frame/FAQs/FocusOnElement/

Second, I remember someone once talked about a technique in which you would render all page elements with a tabindex of -1 except for the one to which you wanted focus transferred, to which you would give the value 0.

So, as the user left a field, the to-be-the-new-focus element was rerendered with a tabindex of 0 (it was -1 before). In effect, the application was driving focus by rerendering the tabindex attribute of fields, as the user moved about. Warning: I've never tried this technique and I don't know if it works.

[esnyder]

Thanks! (Feeling sheepish about missing the FAQ.)