JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<!-- issue to inspect #1 -->
<!--

for this issue keydown will be a workaround
Working scenario

Click on hello
hello disappears; textbox appears, with caret inside it
Press Enter
Textbox disappears; hello reappears
Broken scenario

Put focus on document
Press Tab until hello is in focus
Press Enter
hello disappears; textbox appears, with caret inside it
Textbox disappears; hello reappears ... before I have a chance to do anythin
-->

<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<div id="value">
	<a href="#">hello</a>
</div>
<div id="edit">
	<input type="text" value="hello" />
</div>

JavaScript

$(function() {	
    $('#edit').hide();
	
	$('#value')
		.css('cursor', 'pointer')
		.click(function(e) {
			$('#edit').show();
			$('#edit input').focus();
            console.log("FOCUS IN",e);
			$('#value').hide();
            e.stopPropagation();
            e.stopImmediatePropagation();
            
            
		});
	
	$('#edit input')
		.keyup(function(e) {
            console.log("keyup fire IN", e);
			if (e.keyCode == 13) {  // <enter>
				$('#value').show();
				$('#edit').hide();
			}
		});
  });