Stimulus Keyboard Event Filter
What it was
In the last update of Stimulus v3.2.2
, the ability to filter the event by PageDown
and PageUp
keys was added.
Before that, in v3.2.1
, it looked like this:
<div data-action="keyup->myController#myfunction"></div>
and some like this…
import { Controller } from "stimulus";
export default class extends Controller {
connect() {
// Add a keydown event listener when the controller is connected to the DOM
document.addEventListener("keydown", this.handleKeyDown);
}
disconnect() {
// Remove the keydown event listener when the controller is disconnected
document.removeEventListener("keydown", this.handleKeyDown);
}
handleKeyDown(event) {
// Access the pressed key from the event
const pressedKey = event.key;
// Do something with the pressed key
console.log(`Pressed key: ${pressedKey}`);
}
}
What the new
For now, you can call page_up
/page_down
in action, like:
<div data-action="keydown.page_up->myController#myfunction"></div>
It appears that the update introduces a more declarative syntax for handling key events in Stimulus. Instead of manually adding and removing event listeners in the controller, you can now specify the key and event type directly in the HTML using the data-action attribute.
For example, in the updated version, the element is set to trigger the myfunction method in myController specifically on a keydown event for the Page Up key. This makes the code cleaner and more readable, emphasizing the intent directly in the HTML markup.