JSFiddle - React, Tailwind, and code Playground

HTML

<p>Click the textbox, the contents should be selected.  Click again, the cursor should get positioned and the selection disappear.  See <a href="http://vocamus.net/dave/?p=1480">http://vocamus.net/dave/?p=1480</a> for details.</p>

<div id="demo"></div>

JavaScript

var selectaBox = (function(){

  function __highlight( e ){
    var input = e.target;
    input.select();
    input.removeEventListener( "focus", __highlight, false );
  }

  function __ignoreMouseUp( e ){
    e.preventDefault();
    var input = e.target;
    input.removeEventListener( "mouseup", __ignoreMouseUp, false );
  }

 function __addListeners( input ){
    input.addEventListener( "focus", __highlight, false );
    input.addEventListener( "mouseup", __ignoreMouseUp, false );
 }

 return function(){
   var input = document.createElement( "input" );
   input.type = "text";
   input.addEventListener(
     "blur",
     function( e ){
       __addListeners( e.target );
     },
     false
   );

   __addListeners( input );

   return input;
 };

}());

var s = selectaBox();
s.value = "This is some text."
document.getElementById("demo").appendChild(s);