JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<input type="text" tabindex="1" />
<div class="tabbable" tabindex="2" data-bind="hasFocus: div1HasFocus"></div>
<div class="tabbable" tabindex="3" data-bind="hasFocus: div2HasFocus"></div>
<div class="tabbable" tabindex="4" data-bind="hasFocus: div3HasFocus"></div>
<input type="text" tabindex="5" />

<br />
<button data-bind="click: function () { div1HasFocus(true); }">set focus to div 1</button>
<button data-bind="click: function () { div2HasFocus(true); }">set focus to div 2</button>
<button data-bind="click: function () { div3HasFocus(true); }">set focus to div 3</button>

CSS

div.tabbable {
    display: inline-block;    
    width: 100px;
    height: 100px;
    background-color: blue;
}

div.tabbable:focus {
    outline: 0;    
    background-color: red;
}

JavaScript

/**
    Knockout set focus example
*/

var vm = {
    div1HasFocus: ko.observable(false),
    div2HasFocus: ko.observable(false),
    div3HasFocus: ko.observable(false)
}

ko.applyBindings(vm);