Backspace isn't working in regular text fields :(


#1

Hi everybody, I am creating a package which requires input from the user in multiple areas. For some reason, all of the input fields don’t allow the backspace button to work… I have no idea what’s going on. Here is an example declaration:

@input type: 'text', class: 'input', id: 'username'

Please note that I have no javascript attached to the input field either. This is very weird. Thanks in advance for any suggestions.


Native HTML input vs. Atom
Backspace not working in TextEditorView
Drag & Drop
#2

Have you tried to put the input in a container with the native-key-bindings class and with a tab-index attribute set to -1?


Copy unavailable in subclassed views
Cannot capture core:move-to-top
#3

Using the native-key-bindings class fixes the backspace key, but also prevents other useful bindings from working (it breaks cmd+a for me, for example)

I think the correct thing to do here is use an EditorView subview instead of an input. See how the find-and-replace package does it:


Simple way to get copy working on my own pane item?
Input Text Element Can't Backspace
#4

Thank you @abe and @postcasio!! That works like a charm. I never knew about this native-key-bindings class. Can you point me to some documentation on why this fixes it?

Thanks again!


#5

Also, like @postcasio said this is breaking some other key bindings like TAB. I can’t tab to the next field anymore (even with tab index set). Is this a sacrifice I have to make in order for backspace to work? It seems pretty lame if it is…


#6

I don’t know if there’s any documentation on that, @leedohm or @AbeEstrada are you aware of something about it?

[quote=“haggy, post:5, topic:11020, full:true”]
Also, like @postcasio said this is breaking some other key bindings like TAB. I can’t tab to the next field anymore (even with tab index set).[/quote]

As @postcasio said you should go with a mini EditorView rather than a native input, the API may be a bit different but it have a better integration with Atom.

I think the idea is to have more control over the behavior of inputs, relying on native input means that you are bound to the chromium implementation, with all the limits that comes with it.


#7

Makes perfect sense, thanks! I’ll try that out and let you guys know if there are any issues.


#8

The only documentation I know about for the native-key-bindings class is in the Keybinding documentation under “Forcing Chromium’s Native Keystroke Handling”:

https://atom.io/docs/latest/advanced/keymaps

The documentation on the website gets better all the time, and you can contribute to it with a pull request to Atom Core if you believe there are parts that are lacking.


#9

Thank you for that link. I’m definitely bookmarking it. It explains everything in an easy-to-understand way. If I read that first I wouldn’t have polluted the forum with all these posts.

Edit: I actually meant this reply for a different thread but it works here as well.


#10

New link to the keymap documentation: http://flight-manual.atom.io/behind-atom/sections/keymaps-in-depth/