Stimulus: Greeting example in demo doesn't react to Enter

Created on 21 Mar 2018  路  4Comments  路  Source: hotwired/stimulus

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!

Most helpful comment

<!--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}!`
  }
}

All 4 comments

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

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.

<!--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}!`
  }
}

Thanks a lot for the example!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ngan picture ngan  路  3Comments

jenkijo picture jenkijo  路  3Comments

pherris picture pherris  路  3Comments

saneef picture saneef  路  4Comments

joeybeninghove picture joeybeninghove  路  4Comments