x
1
2
3
4
5
6
7
8
9
10
<form class="flex flex-col gap" data-controller="form" action="/slow_action" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="gR4mmvPC7o2-iwC0CSuJSH-cKHaM2kQkSy4vFyJMi3iFE4__fzWeXSecJeYLd9RrRhSlAX7zYbYGNRLgB5BB6g" autocomplete="off" />
<div class="flex flex-col gap-half">
<label class="text-sm font-medium leading-none" for="content">Content</label>
<textarea rows="10" class="input" data-action="keydown.meta+enter->form#submit keydown.ctrl+enter->form#submit" name="content" id="content">
</textarea>
</div>
<div class="flex items-center">
<input type="submit" name="commit" value="Save changes" class="btn btn--primary" data-disable-with="Save changes" />
</div>
</form>
1
2
3
4
5
6
7
8
9
10
<%= form_with url: main_app.slow_action_path, class: "flex flex-col gap", data: { controller: "form" } do |form| %>
<div class="flex flex-col gap-half">
<%= form.label :content, class: "text-sm font-medium leading-none" %>
<%= form.text_area :content, rows: 10, class: "input", data: { action: "keydown.meta+enter->form#submit keydown.ctrl+enter->form#submit" } %>
</div>
<div class="flex items-center">
<%= form.submit "Save changes", class: "btn btn--primary" %>
</div>
<% end %>
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
16
17
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = [ "cancel" ]
submit() {
this.element.requestSubmit()
}
cancel() {
this.cancelTarget?.click()
}
preventAttachment(event) {
event.preventDefault()
}
}