x
1
<form class="button_to" method="post" action="/lookbook/home/index"><button class="btn" data-controller="hotkey" data-action="keydown.w@document->hotkey#click" data-turbo-confirm="Are you sure?" type="submit">Click or press w</button><input type="hidden" name="authenticity_token" value="yJwdk9BIJJKauuBVwILt9mKDLARoaOMYa9z4DKNEz-KHf4nKVIBuCvKmW11hnHBlN7g2QNiCHiC7pVk_P6cfWQ" autocomplete="off" /></form>
1
<%= button_to "Click or press w", nil, class: "btn", data: { controller: "hotkey", action: "keydown.w@document->hotkey#click", turbo_confirm: "Are you sure?" } %>
CSS is not required or multiple files are needed, check the notes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
click(event) {
this.#isClickable && !this.#shouldIgnore(event) && this.element.click()
}
#shouldIgnore(event) {
return event.defaultPrevented || event.target.closest("input, textarea")
}
get #isClickable() {
return getComputedStyle(this.element).pointerEvents !== "none"
}
}