JSFiddle - React, Tailwind, and code Playground

by Deepak Anand

HTML

<div class="container">
<input class="inp1" value= "inp 1">
<input class="inp2" value ="inp 2">
<input class="inp3" value ="inp 3">
</div>

CSS

.container{
  width: 200px;
  height: 200px;
  background: yellow;
  overflow: hidden;
  position: relative;
}

.inp1, .inp2, .inp3{ 
  width: 100px;
  position: absolute;
}

.inp2{  
  left: 150px;
}

.inp3{
  left: 170px;
  top: 50px;
}

JavaScript

// Demonstrates browser scrolling behavior(in Google Chrome) when tabbing between clipped focusable elements:
// 1. click into "inp 1" and press [Tab]
// 		focus moves to "inp 2", but the browser does not scroll
// 2. Press [Tab]
//		focus moves to "inp 3" and browser scrolls 
//
// It seems like the browser does not scroll when 
// at least half of the clipped element width is in view.
// Browser scrolls when more than half is clipped
//
// It does not ever scroll when you use the mouse to focus into the element instead of the [Tab] key

// Firefox seems to behave differently,
// TODO: check other browsers, look up browser doc/specs to understand rationale