Greeting example in demo doesn't react to Enter

[merwok]

Hello! I was on the project homepage to see what this framework is and tried the «Greet» demo.
Pressing Enter has no effect; one must click on the button. It would be great to have both input methods.
Thanks for considering this!

[javan]

That would be nice, but we'd like to keep the example code short and sweet for now. Thanks for the suggestion!

[merwok]

Ok, too bad. I had hoped that with a modern lib there could be short and sweet code to react to keyboard as well as clicking.

[javan]

<!--HTML from anywhere-->
<div data-controller="hello">
  <input data-target="hello.name" data-action="keydown->hello#greetWithKeyboard" type="text">

  <button data-action="click->hello#greet">
    Greet
  </button>

  <span data-target="hello.output">
  </span>
</div>

// hello_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "name", "output" ]

  greetWithKeyboard(event) {
    if (event.keyCode == 13) {
      this.greet()
    }
  }

  greet() {
    this.outputTarget.textContent =
      `Hello, ${this.nameTarget.value}!`
  }
}

[merwok]

Thanks a lot for the example!

[matoni109]

Is this still the answer in 2022 ?

[marcoroth]

@matoni109 Currently yes, but there was some development going on in this area. Check out #442

[matoni109]

#442 looks like a great way forward, thanks for the update