Focus lost from current input after rendering view in backbone.js

[Vikrant Karande]

I am using backbone.js with coffee-script in rails application.
I have many input element in backbone view, after rendering view focus of current input element lost.
I have to keep focus on current element after rendering view.
How can i solve this problem??

[Alan Greenblatt]

Not sure if this is the optimal solution, but I recently ran across this same problem using Marionette 1.8.8. When the user input changes and then settles, I change the model, and that causes the view to render, and then lose focus. I ended up using a combination of onBeforeRender() and onDomRefresh() on the View:

onBeforeRender() - Save away the id of document.activeElement. If you want to save the current selection in an input field or textarea, you should also save the activeElement's selectionStart & selectionEnd.

onDomRefresh() - (To be honest, I can't remember why I ended up using onDomRefresh() rather than onRender(), but I do remember it was necessary) 

Here, check if there is a saved activeElement id (from onBeforeRender()`), then get that element from the id (you can't save the element itself since that would have been destroyed with the re-render), and then set the focus to that element (savedActiveElement.focus()).  You can also call activeElement.setSelectionRange() with the saved selectionStart & selectionEnd to restore the active selection.

Hopefully that should do the trick.

Alan

[Vikrant Karande]

Hey thanks Alan,
In my application all input types are dynamic. We can not set id to them. We can not predict how many input type user can add.
Currently i am distinguish them with their value.

[Alan Greenblatt]

As long as you can uniquely identify the element before (onBeforeRender) and after (onDomRefresh) you should be good to go. If you’re identifying the elements by value, then just save that value in the onBeforeRender. Then in onDomRefresh, find the input with that value, set the focus to it and restore the selection.

--
You received this message because you are subscribed to a topic in the Google Groups "Backbone.Marionette" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/backbone-marionette/SDiIA0FXRRg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to backbone-marion...@googlegroups.com.
To post to this group, send email to backbone-...@googlegroups.com.
Visit this group at http://groups.google.com/group/backbone-marionette.
To view this discussion on the web visit https://groups.google.com/d/msgid/backbone-marionette/f5f009e5-abc3-4bd6-9954-a2c48f27cb9a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.