JSFiddle - React, Tailwind, and code Playground

by termi

HTML

<h3>Webkit input's bug 1 test. (Still not fixed)</h3>
<p>There shoud be no focused elements</p>
<p>Bug description: webkit sets focus after selection[Start/End] changes or setSelectionRange called</p>
  <form id="form1">
      <label style="display:block">
          <input />
		  <span>Last event: <b></b>
      </label>
      <label style="display:block">
          <input />
		  <span>Last event: <b></b>
      </label>
      <label style="display:block">
          <input />
		  <span>Last event: <b></b>
      </label>

	  <button>Set random curet</button>
  </form>

<h3>Webkit input's bug 2 test. (Fixed in Chomium, present in Chromium-based browsers such Yandex.Browser)</h3>
<p>Text input shoud cause change focus to the next element</p>
<p>Bug description: webkit returns focus to previous activeElement if activeElement was changed in keyboard event</p>

<form id="form2">
      <label>
          <input id="test1" name=test1 />
      </label>
      <label>
          <input id="test2" name=test2 />
      </label>
      <label>
          <input name=test3 />
      </label>
      <label>
          <input name=test4 />
      </label>
      <label>
          <input name=test5 />
      </label>

  </form>

  <div id="output"></div>

JavaScript

var output = document.getElementById("output");

// test 1
void function() {
    function String_random(length) {
        if(!length || length < 0)return "";
    	
    	return (new Array(++length)).join(0).replace(/./g,function() {
    		return(0 | Math.random() * 32).toString(32)
    	});
    };
    function input_event(e) {
        e.target.parentElement.querySelector("b").innerHTML = e.type;
    }
    
    
    var form = document.getElementById("form1");
    
    var inputs = Array.prototype.slice.call(form.querySelectorAll("input"));
    
    inputs.forEach(function(input) {
    	input.value = String_random(15);	
	
        input.addEventListener("focus", input_event);
		input.addEventListener("blur", input_event);
    })

    form.querySelector("button").addEventListener("click", function(e) {
		var _currentElement = document.activeElement;

		inputs.forEach(function(input) {
			var rn1 = Math.random() * 5
				, rn2 = rn1 + Math.random() * 3
			;
		
			input.setSelectionRange(rn1, rn2);
			input.selectionStart = rn1;
			input.selectionEnd = rn2;
		});

		if( document.activeElement != _currentElement ) {
			output.insertAdjacentHTML("beforeend", "<b style='color:red'>Bug</b> setted selectionStart/selectionEnd or call setSelectionRange should not set focus to input");
		}
		
		e.preventDefault();
	})

}()    

// test 2
void function() {
    var form = document.getElementById("form2");
    
    Array.prototype.forEach.call(form.querySelectorAll("input"), function(input) {
        input.addEventListener("focus", function(e) {
            var target = e.target;
    
            //target.value += 1;
        })
    })
    
    
	function checkInput(input) {
		if( document.activeElement != input ) {
			output.insertAdjacentHTML("beforeend", "<b style='color:red'>Bug</b> focus should be on next input element");
		}
	}
    
    form.addEventListener("input", function(e) {
        var target = e.target
            , form_input_index =...