Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add disableOnInputFields option, which allows to automatically disable keyboard events on all input fields #557

Merged
merged 5 commits into from
Jan 18, 2022
Merged

Add disableOnInputFields option, which allows to automatically disable keyboard events on all input fields #557

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
93978fe
check if target is an input element
st-h Nov 6, 2020
b4b228f
Merge branch 'master' into auto-first-responder
st-h Dec 26, 2021
be9ef05
add config option disableOnInputFields
st-h Dec 26, 2021
62d93a1
add test
st-h Dec 26, 2021
c7f3c30
implement requested changes
st-h Jan 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions addon/services/keyboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,10 @@ export default class KeyboardService extends Service {
getOwner(this).resolveRegistration('config:environment') || {};
let emberKeyboardConfig = config.emberKeyboard || {};

if (emberKeyboardConfig.disableOnInputFields) {
this._disableOnInput = true;
}

this._listeners = emberKeyboardConfig.listeners || [
'keyUp',
'keyDown',
Expand All @@ -65,6 +69,15 @@ export default class KeyboardService extends Service {

@action
_respond(event) {
if (this._disableOnInput && event.target) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@st-h @lukemelia I think it may be more flexible to be able to configure this per modifier instance, however tat may be done as a next step enhancement

const tag = event.target.tagName;
const isContentEditable =
event.target.getAttribute &&
event.target.getAttribute('contenteditable') != null;
if (isContentEditable || tag === 'TEXTAREA' || tag === 'INPUT') {
return;
}
}
run(() => {
let { firstResponders, normalResponders } = this;
handleKeyEventWithPropagation(event, {
Expand Down
12 changes: 10 additions & 2 deletions tests/dummy/app/templates/usage.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,8 +277,16 @@ triggerOnAlphaNumeric(event) {

### `Ember.TextField` && `Ember.TextArea`

To prevent `ember-keyboard` from responding to keystrokes while an input/textarea is focused,
you may use the `on-key` modifier with regular `<input>` and `<textarea>` elements and invoke
To prevent `ember-keyboard` from responding to keystrokes while an input/textarea/contenteditable is focused,
you can set disableOnInputFields in config/environment.json.

```javascript
emberKeyboard: {
disableOnInputFields: true
},

```
Alernatively you may use the `on-key` modifier with regular `<input>` and `<textarea>` elements and invoke
`ekEvent.stopPropagation()` and/or `ekEvent.stopImmediatePropagation()`.
This ensures that whenever an input is focused, other key responders will not fire.

Expand Down