Deprecation error with simple keyboard shortcut implementation

[Wolfr]

I implemtented two simple keyboard shortcuts in my app:

{{on-key 'ctrl+m' this.toggleVisibility}}
{{on-key 'ctrl+b' this.toggleVisibility}}

These toggle the visibility of something:

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class styleguideComponent extends Component {
  @tracked visibility = true;
  @service router;

  @action
  toggleVisibility() {
    this.visibility = !this.visibility
  }
}

However, I get a long depreciation stack trace . I think I used the latest syntax as documented here.

If I remove the 2nd shortcut, I don't get the stack trace. However, it is recommended in the docs to do it this way for multiple shortcuts.

Would anyone have an idea why I am getting this stack trace? I loved the simplicity of this package btw.

[lukemelia]

Hi @Wolfr, I'm glad you're enjoying the addon! The deprecation warning you're getting is documented on the deprecations page: http://adopted-ember-addons.github.io/ember-keyboard/deprecations (see the initializer section at the bottom). I've pasted the relevant portion here:

--

ember-keyboard-first-responder-inputs initializer

ember-keyboard includes an initializer that reopens ember's TextArea and TextField components and mixes in EKMixin and EKFirstResponderOnFocusMixin. The on-key modifier added in 6.0 accomplishes a similar goal in a less intrusive and less hidden way. This initializer will be removed in 7.0. To opt out of it now and remove the deprecation warning, disable the initializer by setting emberKeyboard.disableInputsInitializer in the config/environment.js to true.

Related to this, if you were importing { initializer } from 'ember-keyboard' in any integration tests, this should no longer be necessary as Ember integration tests now run initializers themselves. This export will be removed in 7.0 as well.

--

I know it's annoying to have to deal with this as a new user, and I apologize for that. It is the best way I could come up with to ensure that we bring all users along the upgrade path safely.

[Wolfr]

Excuse my ignorance, but if I put this in environment.js it complains about emberKeyboard not being found, would I then import emberKeyboard somehow? I don't understand the relation between an Ember addon and the initialisation I think.

If I try import emberKeyboard from 'ember-keyboard' I get Cannot use import statement outside a module.

I tried to add the code on L28 similar to this Gist.

[lukemelia]

@Wolfr The change should look like this: https:/rust-lang/crates.io/pull/2563/files#diff-695693c5dabaffb064bde5b060195ff7

[optikalefx]

question: I'm using keyResponder and still getting this deprecation. Should I not be using keyResponder either? Thanks!

[lukemelia]

@optikalefx no deprecation should not be triggered by using keyResponder. Did you configure your config/environment.js file (like this)?

[optikalefx]

@lukemelia that was it! missed that detail. Thanks for the fast response.

[chrism]

Hi – I wanted to check I have missed something because am still getting a couple of deprecations after adding this to my config ENV...

emberKeyboard: {
  disableInputsInitializer: true,
}

I'm using v3.27.0 of Ember and v6.0.3 of Ember Keyboard.

It removed a bunch of deprecations, but I still get these two...

Am I missing something?

So far the only use is a very simple one in a template

<button {{on "click" this.nextQuestion}} {{on-key "Enter"}} type='button' class="w-full btn-md btn-red">Next</button>

Thanks!

[SergeAstapov]

@chrism would you mind sharing reproduction of the issue you have? this shouldn't be a problem anymore

[didoo]

@SergeAstapov I see the a lot of deprecation warnings too, using a simple implementation like this:
<a ... {{on-key "Space" this.onKeySpace}}>

(ember-cli: 4.1.1 / ember-keyboard: 8.0.0)

[SergeAstapov]

I see the a lot of deprecation warnings too, using a simple implementation like this:
<a ... {{on-key "Space" this.onKeySpace}}>

@didoo those deprecations have been recently introduced by ember-modifier in v3.2.0.
I plan to address them this or next week.

[SergeAstapov]

Actually ember-modifier deprecations seem to be easy to fix, created #617

[SergeAstapov]

@didoo 8.1.0 is out fixing ember-modifier deprecations