8

Working on a HTML control that more/less operates like a spreadsheet - with a matrix of editable data cells. When it comes to cells derived from a SELECT I'm having an issue getting the correct behavior when that type of cell is selected for edit:

If I render the Select using its default formatting (size = 0) then the user gets the out-of-place behavior of Select's Enter-key processing:

  • 1st Enter => activates editing on the cell (shows the select control)
  • 2nd Enter => expands the Select to show the Options
  • user makes selection using up/dn keys
  • 3rd Enter => closes the list. (Problem: this Enter is hidden from "keydown" event handler)
  • 4th Enter => required to trigger the event listener for deactivating cell edit.

On the other hand, if the select is rendered as a listbox (ie, size = 3, for example) the Enter key behavior is exactly what I'm looking for (meaning, #2 and #3 on the above list are no longer required), but because the list is now displayed internally to the control (rather than as a pop-up) it blows up the cell/row sizing.

So, is there a way to "hook" into the 3rd Enter-key event above, or some other relatively straight-forward way to alter the Select's behavior when it comes to processing the Enter key?

NOTE: we are not using any 3rd party library (read: jQuery, et. al)

EDIT: here is the event listener (attached via typical "addEventListener(...)"

this.e_sKeyDown = function(control, event) {
  switch(event.keyCode) {
    case 13:  // enter
      control.blur()
      break
    case 27:  // esc = reset selection to it previous value
      control.setAttribute("data-cancelModify", "true")
      control.blur()
      break
  }
}

2nd EDIT: per comments/suggestions, I've added/given this try: 

this.e_sOnChange = function(control, event) {
  control.blur()
}

That event will fire, but it fires for each of the different Option/s. In other words, it doesn't appear that I'll have any way to determine if that is the Option that the user actually intended for selection, or just one that was traversed along the way. To demonstrate, here is any example for jquery's site. Note how the text changes with each up/down, regardless of Enter-key:

http://api.jquery.com/change/

SOLVED: thanks to all the commenters for their suggestions. Indeed, the solution (for my situation anyway) was to add a "keyup" event listener into the mix. I can't say what browsers this will work in, but it is functional in the later versions of Chrome.

Ry-
  • 218,210
  • 55
  • 464
  • 476
mjk
  • 659
  • 1
  • 9
  • 20
  • 3rd enter => `onchange`, perhaps? – John Dvorak Aug 09 '13 at 21:26
  • Why is the third enter hidden from the `keydown` handler? – Justin Morgan - On strike Aug 09 '13 at 21:26
  • onChange... thanks, I'll look into that. Justin: I have no idea, all I can say is that the event is not trigger with the Select is in its expanded sate. I will post event handler. – mjk Aug 09 '13 at 21:29
  • So let me see if I understand...the problem is that the `keydown` event isn't firing when the listbox is open? That's what it sounds like. Throw a `keydown` listener on the whole document and see if it's popping up on a different element than you think. I don't know how to do this without jQuery, sorry. – Justin Morgan - On strike Aug 09 '13 at 21:30
  • OTOH, if @JanDvorak's `onchange` idea works, I say go with that. – Justin Morgan - On strike Aug 09 '13 at 21:33
  • In essence Yes - I'm not sure if it's even supposed to (given the loose spec on Enter processing behavior) or whether I'm looking at some type of "interference" – mjk Aug 09 '13 at 21:33
  • in general, I have seen "custom selects" implemented with floating divs or whatever – Saic Siquot Aug 09 '13 at 21:35
  • I've given the onChange handler a go, but it's getting triggered on *each* record of the option list - whether that's the one intended for selection, or not... – mjk Aug 09 '13 at 21:57
  • 2
    There is always `keyup` too. I have found when trying to capture key events that `keyup` has always been the best for cross-browser compatibility. Not sure if it'll be the fix for you, but it is worth a shot, right? – Tim Hobbs Aug 09 '13 at 22:22
  • @jesus.tesh - bingo. Just what I needed, thank you. – mjk Aug 10 '13 at 00:24

1 Answers1

2

Per suggestions, the way to pick up the "hidden" Enter-key event is to add a "keyup" event listener; question has been edited to reflect the solution.

NOTE: this answer was only posted to close the question; please give credit where it is due - jesus.tesh and the rest of the commenters for their suggestions...

mjk
  • 659
  • 1
  • 9
  • 20