4

I have an element (#cols) that's 3x wider than the <body>. It has 3 columns, each of which is exactly as wide as <body>. Clicking a button slides the #cols element over by the width of one column and simultaneously focuses the <input> in the column that's sliding into view:

http://jsbin.com/puhurakewa/1/edit?html,css,js,output

The problem, as you can see from the demo, is that focusing the input causes weird behavior. I believe the browser says,

"Crap, the user focused an input that's off-screen. I need to show it!"

and then magically scrolls the input into view. This breaks the transition.

Is there a way to disable this behavior? It's extremely undesirable. I've noticed it in Chrome, Safari, and Firefox on my Mac.

EDIT: Thank you for the answers so far. I should have been more specific with my question. I'm aware that I can "work around" this issue by waiting for the animation to end, but what I'm curious about is how to work through this issue and focus the input immediately. It's a better experience, because users can begin typing before the transition is over.

John Weisz
  • 30,137
  • 13
  • 89
  • 132
NudeCanalTroll
  • 2,266
  • 2
  • 19
  • 43
  • _"It's a better experience, because users can begin typing before the transition is over."_ -- My thoughts exactly. I'm curious though, have you managed to figure this out by now? I'm facing the same problem at this very moment (of course if I come up with a solution, I'll post it right away). – John Weisz Jun 30 '16 at 09:42
  • @JohnWhite No, I just gave up on the sliding transition. – NudeCanalTroll Jul 08 '16 at 20:16

3 Answers3

1

Add the focus event after transition ends

 $('#cols').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
      $input.focus();
  });

JSbin Demo

anpsmn
  • 7,217
  • 2
  • 28
  • 44
1

Since you already using Jquery might as well leverage the animate method, then on the complete function you focus the input, for more info check out the docs

Heres the JS (this works perfectly, but spend some time neatening it up/refactoring if you wish):

$(document).ready(function () {
  $('button').on('click', function () {

  var colId = $('.showing').attr('id');

    if(colId == "col-1"){
      $('#cols').animate({
          right: '200px'
      }, 1000, "swing", function(){
          $("#col-2").find('input').focus();
          $('#col-1').removeClass('showing');  
          $('#col-2').addClass('showing');              
      });
    }
    else if(colId == "col-2"){
      $('#cols').animate({
          right: '400px'
      }, 1000, "swing", function(){
          $("#col-3").find('input').focus();
          $('#col-2').removeClass('showing');  
          $('#col-3').addClass('showing');                    
      });          
    }
    else if(colId == "col-3"){
      $('#cols').animate({
          right: '0px'
      }, 1000, "swing", function(){
          $("#col-1").find('input').focus();
          $('#col-3').removeClass('showing');  
          $('#col-1').addClass('showing');                    
      });          
    }
  });
});

Then change your CSS to position relative like so:

#cols {
  height: 100%;
  transition: transform 400ms;
  white-space: nowrap;
  width: 600px;
  position:relative;
}

HTML (just add 'showing' class to first col):

<body>
   <button>Shift Cols & Focus Input</button>
   <div id="cols" col-to-show="1" >
      <div class="col showing" id="col-1">
        <input type="text" value="1" />
      </div>
      <div class="col" id="col-2">
        <input type="text" value="2" />
      </div>
      <div class="col" id="col-3">
        <input type="text" value="3" />
      </div>
  </div>
</body>

Here's a fiddle

EaziLuizi
  • 1,557
  • 1
  • 16
  • 25
1

magically scrolls the input into view

This is the key. Just change scrollLeft of the container to 0 after focusing. I had to put a wrapper around it though.

http://jsbin.com/danarucama/1/edit?html,css,js,output

Shaun Lebron
  • 2,501
  • 28
  • 29