keyup event not triggered for escape key

Question

I have a text input field referred to as $nameEditor. I want to show this text field when a button is pressed, and hide it on blur or when the escape key is pressed.

Hiding the field on blur works every time.

Hiding the field when pressing the escape key works only the first time. Example sequence of events.

1) Press the button that shows the text input field. 2) Press escape - text input field hides 3) Press the button that shows the text input field again. 4) Press escape - the keyup event is not triggered 5) Press any other key and the keyup event is triggered 6) Press escape - the text input field hides

Relevent markup:

<button id="renameButton" title="Rename" data-icon="ui-icon-pencil">Rename</button>
<span id="assemblyNameView">Assembly Name</span>
<input id="assemblyNameEditor" style="display:none" class="ui-corner-all widget">

Relevant script:

var $renameButton = $("#renameButton");
var $nameViewer = $('#assemblyNameView');
var $nameEditor = $('#assemblyNameEditor');

function cancelEdit() {
  $nameEditor.hide();
  $nameViewer.show();
}

function initEdit() {
  $nameViewer.hide();
  $nameEditor.val($nameViewer.text()).show().select();
}

function commitEdit(newName) {
  // TODO: Update the structure being edited.
  $nameEditor.hide();
  $nameViewer.text(newName);
  $nameViewer.show();
}

$renameButton.click(initEdit);

$nameEditor.blur(cancelEdit);

$nameEditor.keyup(function(e) {
  console.log(e);

  if (e.keyCode === 13) {
    var newName = val();

    if (newName === '') {
      alert("No name specified.");
      $nameEditor.val($nameViewer.text()).select();
      e.preventDefault();
      return false;
    }

    commitEdit(newName);
  }
  else if (e.keyCode === 27) {
    cancelEdit();
  }
});

Why is the escape key not triggering the keyup event after the input box has been hidden then re-shown?

Good question. I was using Chrome. However, I just tested the code in IE 10 and Firefox and I get the expected/desired behavior. This seems to be a bug in Chrome. Applying King King's solution produced the expected behavior in Chrome. — Mike Nitchie

King King King King · Accepted Answer · 2014-05-21T21:37:03

It's hard to explain what's wrong here. There is a strange effect when both the button and the textbox receive focus? It's impossible in a standard UI interface. In fact when you type keys other than ESC, Enter, Space and maybe more ... the typed characters are shown OK in the textbox and only the textbox receives focus after that. However if you type ESC, Enter, Space... the keystrokes seem to affect on the button and I can even see there is some color effect on the button showing that it's currently focused. This looks like a bug indeed.

However to solve this, I tried using focus() explicitly appended after .select() and it works OK.

function initEdit() {
  $nameViewer.hide();
  $nameEditor.val($nameViewer.text()).show().select().focus();
}

keyup event not triggered for escape key

1 Answers

Demo.