JSFiddle - React, Tailwind, and code Playground

by Abhijeet Kandalkar

HTML

<div style="margin:5px;">
    <p>Double-click to make writable (<strong>cursor lost</strong> but you still can type)</p>
    <input id="input1" type="text" readonly="readonly"/>
</div>

<div style="margin:5px;">
    <p>Double-click to make writable (expected behavior)</p>
    <input id="input2" type="text" readonly="readonly"/>
</div>

JavaScript

var input1 = document.getElementById('input1');
input1.addEventListener('dblclick', onDblClick);
input1.addEventListener('blur', onBlur);

var input2 = document.getElementById('input2');
input2.addEventListener('dblclick', onDblClick);
input2.addEventListener('blur', onBlur);

function onDblClick(e) {
    this.readOnly = false;
}

function onBlur(e) {
    this.readOnly = true;
}