diff --git a/app/javascript/controllers/form_controller.js b/app/javascript/controllers/form_controller.js index 4288143a4..d291de2bb 100644 --- a/app/javascript/controllers/form_controller.js +++ b/app/javascript/controllers/form_controller.js @@ -15,6 +15,10 @@ export default class extends Controller { event.preventDefault() } + select(event) { + event.target.select() + } + showPicker(event) { if ("showPicker" in HTMLInputElement.prototype) { event.target.showPicker() diff --git a/app/views/bubbles/edit.html.erb b/app/views/bubbles/edit.html.erb index c3e70b0f4..da7fabc50 100644 --- a/app/views/bubbles/edit.html.erb +++ b/app/views/bubbles/edit.html.erb @@ -1,10 +1,10 @@ <%= turbo_frame_tag @bubble, :edit do %> <%= form_with model: @bubble, class: "flex flex-column gap full-width", data: { controller: "form" } do | form | %> <%= form.label :title, class: "flex flex-column justify-center align-center" do %> - <%= form.text_area :title, class: "input input--textara unpad full-width borderless", + <%= form.text_area :title, class: "input input--textara txt-align-center full-width borderless", required: true, rows: 5, autofocus: true, placeholder: "Name it…", - data: { action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel" }, - style: "color: var(--spat-color)" %> + data: { action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel focus->form#select" }, + style: "color: var(--spat-color); --input-border-radius: 0" %> <% end %> <%= form.submit "Save", hidden: true %> <%= link_to "Close editor and discard changes", bubble_path(@bubble), data: { form_target: "cancel" }, hidden: true %>