Text fields losing focus on their own (switching to browser quick buttons)

  • 1
  • Problem
  • Updated 4 years ago
  • Solved
We have run into this issue a few times in our production org when typing in text fields.  Once the space bar is hit, about a second later the cursor disappears and the next key press utilizes browser quick keys like backspace to reload the previous page or space to scroll.  If the user continues typing, the text does not go into the field (which is no longer selected)...

One of your guys had fixed this for us previously but I'm not quite sure how.  Please let us know how to correct, this can be cumbersome for users.  Awesome work btw, y'all have a killer product!!
Photo of Brad McClanahan

Brad McClanahan

  • 84 Points 75 badge 2x thumb

Posted 4 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
The source of the issue was with your Template components containing iFrames.

The Template components were associated a Model on your page that was being changed a lot, and the way the Template component works is that any time you make a change to any field on the Template's source Model, then all Template components bound to this Model will dynamically update / rerender. Therefore your iFrames are being rerendered, and elements on the iFrame are stealing focus away from the field the user is typing into. 

All you have to do to fix this is to change the Model associated with your Template components to be some other Model that is not getting live-updated all the time. What I did for your original scenario was to create a dummy model called "RunningUser" that only pulls in the User Id of the current user --- since this Model is never going to change or be updated. I then associated all of your Template components with this RunningUser model. This strategy could work for other pages as well. You don't necessarily need to create a dummy model, you could use some other Model that is never going to have changes, but a dummy model will guarantee that the templates will never live-update and cause the problem you were having.

Then, you can use replace any references to fields in your original Model with either $Model or $Param global merge variables, with triple-braces to ensure that these merges are never live-updated.

For example if you had a Template previously bound to an "Account" model's Id field like this:

<iframe src="//box.net/Files?accountid={{Id}}"/>

You could replace the {{Id}} merge with {{{$Param.id}}} or {{{$Model.Account.data.0.Id}}}

Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
I thought there was another forum post about this issue,  but I cannot find it.   Check throughout your page to ensure that any template components that wrap iFrames are not connected to the same model that your field editor is also connected to.  What is happening is that as you start typing in the field the iFrame detects a change in the model and attempts to rerender.  When the re-render happens the focus is moved from the field to the iFrame and you get the weird page behavior. 

You should first try to turn off the "Enable HTML" property.  If that does not work (or causes other problems)  build a second model that is only connected to the Template.  It would only need to have the data necessary for inclusion in the iFrame (probably the ID for the object). 

Hope that helps. 
Photo of Brad McClanahan

Brad McClanahan

  • 84 Points 75 badge 2x thumb
You dudes are great.  Thanks for the help, i think this is what John had done last time we had the issue.  Now at least its on the board with an easy fix.  Keep it krakan!!