Demo - Focus Test

by Manish Gupta

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.gauge.min.js"></script>
<button id="popup1Trigger">Modal Popup</button>
<button id="popup2Trigger">Popup</button>

<h2>Focus Issue</h2>
<ol>
  <li>Click the "Modal Popup" button in the top left to open the popup.</li>
  <li>Observe that the popup contains exactly the same controls.</li>
  <li>Press the tab key.</li>
  <li>Observe that the ListBox will gain focus (with 1 more tab than should be necessary).</li>
  <li>Press the tab key.</li>
  <li>Observe that the focus is now "stuck" in the ListBox.</li>
  <li>Press the esc key to close the popup.</li>
  <li>Click the "Modal Popup" button in the top left to reopen the popup.</li>
  <li>Observe that the ListBox still has focus.</li>
  <li>Press the tab key.</li>
  <li>Observe that it is possible for two controls to display the focus style.</li>
  <li>Press the esc key to close the popup.</li>
  <li>Click the "Popup" button in the top left to open the popup.</li>
  <li>Press the tab key.</li>
  <li>Observe no tabbing issues.</li>
</ol>

<div id="popup1">
</div>
<div id="popup2">
</div>

<div id="popup1Content" style="width: 200px; height: 150px; padding: 5px;">
  <div style=" width: 100%;">
    <div id="autoComplete5" style="float: left; width: 50%"></div>
    <button style="float: left; width: 50%">Butt</button>  
    <div id="autoComplete6" style="float: left; width: 50%"></div>
    <div id="autoComplete7" style="float: left; width: 50%"></div>
    <div...

CSS

.wj-state-focused {
  border: 2px solid red !important;
}
button:focus{
  border: 2px solid red !important;
}

JavaScript

onload = function() {
  
  var listBox3 = new wijmo.input.ListBox('#listBox3');
  var autoComplete5 = new wijmo.input.AutoComplete('#autoComplete5');
  var autoComplete6 = new wijmo.input.AutoComplete('#autoComplete6');
  var autoComplete7 = new wijmo.input.AutoComplete('#autoComplete7');
  var autoComplete8 = new wijmo.input.AutoComplete('#autoComplete8');
  var autoComplete9 = new wijmo.input.AutoComplete('#autoComplete9');
  var autoComplete10 = new wijmo.input.AutoComplete('#autoComplete10');
  var autoComplete11 = new wijmo.input.AutoComplete('#autoComplete11');
  var autoComplete12 = new wijmo.input.AutoComplete('#autoComplete12');
  
  listBox3.itemsSource = [1, 2, 3];
  autoComplete5.placeholder = "AutoComplete";
  autoComplete6.placeholder = "AutoComplete";
  autoComplete7.placeholder = "AutoComplete";
  autoComplete8.placeholder = "AutoComplete";
  autoComplete9.placeholder = "AutoComplete";
  autoComplete10.placeholder = "AutoComplete";
  autoComplete11.placeholder = "AutoComplete";
  autoComplete12.placeholder = "AutoComplete";



  //var autocomplete = wijmo.input.AutoComplete('#aControl');
  var popup1 = new wijmo.input.Popup(document.getElementById('popup1'));
  popup1.content = document.getElementById('popup1Content');
  popup1.owner = document.getElementById('popup1Trigger');
  popup1.modal = true;

  var popup2 = new wijmo.input.Popup(document.getElementById('popup2'));
  popup2.content = document.getElementById('popup2Content');
  popup2.owner = document.getElementById('popup2Trigger');



}