Capturing the delete/backspace keys in SproutCore

Question

I have a SproutCore Pane - a PalettePane, specifically - which includes a form tied to an object elsewhere on the screen. The Pane is causing trouble with the object deletion interaction. The way I want it to work is:

• If a text input field is in focus, the backspace/delete keys should apply to those fields (i.e. editing the text)
• If no text input field has focus, the backspace/delete keys should delete the selected object related to the form. (The pane appears when the user has selected an object, so if the pane exists there's a selected object.)

So far, I get one of these behaviors or the other, never both. If I set acceptsKeyPane: YES in the Pane, I get the backspace/delete keys applying to the text fields, but no deleting of selected objects when the text fields don't have focus. If I use acceptsKeyPane: NO, when I'm editing a text field and hit backspace, it deletes the object I was trying to edit.

To add insult to injury, in Firefox with acceptsKeyPane: YES the backspace key is caught by the browser and interpreted as a back-button click, which is going to be frustrating to the user.

I've looked at the root_responder.js code and it looks like SproutCore handles backspaces differently for Firefox, but if I can handle them as described above the distinction between FF and other browsers should be moot.

Answer 1

Here's how we finally wound up doing it:

• When the pane was created, we called becomeFirstResponder() on it.
• We added acceptsFirstResponder: YES to its view definition.
• Then we added to the view definition:

    keyDown: function(evt) {
      return this.interpretKeyEvents(evt) ? YES : NO;
    },

    deleteBackward: function() {
      this.get('objectToEdit').destroy();
      return YES;
    },

    deleteForward: function() {
      this.get('objectToEdit').destroy();
      return YES;
    }

...and that did the trick.