I had attached some keyboard navigation on span all keyboard keys are working find up, down, left, right. but when setting the focus on mouse click it's not working I had also tried to setTimeout before set focus but that did not work in my case.
$(document).ready(function() {
$(".navigate").click(function() {
$(this).focus();
});
});.box {
width: 300px;
height: 300px;
background-color: burlywood;
}
.navigate {
display: inline-block;
width: 96px;
height: 96px;
margin: 2px;
background-color: brown;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.foucs {
border: 1px solid #fff !important;
}
.row {
background-color: violet;
display: flex;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<div class="row">
<span class="navigate" tabindex="1">1</span>
<span class="navigate" tabindex="1">2</span>
<span class="navigate" tabindex="1">3</span>
</div>
<div class="row">
<span class="navigate" tabindex="1">4</span>
<span class="navigate" tabindex="1">5</span>
<span class="navigate" tabindex="1">6</span>
</div>
<div class="row">
<span class="navigate" tabindex="1">7</span>
<span class="navigate" tabindex="1">8</span>
<span class="navigate" tabindex="1">9</span>
</div>
</div>Change your CSS to this...
.navigate:focus {
border: 1px solid #fff !important;
}
Instead of...
.foucs {
border: 1px solid #fff !important;
}