How do you manage focus and cursor position in maquette js?

Question

I'm working on a small application with maquette js. This library uses a virtual DOM implementation. After some user event that triggers a change in the data store it causes a (partial) rerender including the creation of some new DOM nodes.

How can I make sure that one of the new nodes, which is a contenteditable div, gets the focus once it has been rerendered?

Similarly: how do I retain cursor position in a previously focused element?

Answer 1

You canuse the afterCreate callback that maquette provides to get the Element once it is created. You can call .focus() on it or read/write its selectionStart. Good luck!

PS: If you also want the focus to work on iOS, you need to call projector.renderNow() during the event that triggers the focus.