Manage focus on form show/hide

app/views/units/_form.html.erb

@@ -16,9 +16,16 @@
   <td class="actions">
     <%= form.submit unit.persisted? ? t(:update) : t(:add), form: :unit_form %>
     <%= image_link_to t(:cancel), "close-circle-outline", units_path, class: 'dangerous',
-      onclick: 'this.closest("tr").replaceChildren();
-                document.querySelector("a#add_unit").style.visibility = "visible";
-                return false;' %>
+      onclick: 'closeForm(event); return false;' %>
   </td>
   <!-- TODO: display error_messages_for unit -->
 <% end %>
+
+<%= javascript_tag do %>
+  function closeForm(event) {
+    event.target.closest("tr").replaceChildren();
+    var add_unit_link = document.querySelector("a#add_unit");
+    add_unit_link.style.visibility = "visible";
+    add_unit_link.focus({ focusVisible: true });
+  }
+<% end %>

app/views/units/index.html.erb

@@ -2,7 +2,7 @@
   <% if current_user.at_least(:active) %>
     <%= turbo_frame_tag do %>
       <%= image_link_to t('.add_unit'), 'plus-outline', new_unit_path, id: :add_unit,
-      onclick: 'this.style.visibility = "hidden";', data: {turbo_stream: true} %>
+      onclick: 'this.blur(); this.style.visibility = "hidden";', data: {turbo_stream: true} %>
     <% end %>
   <% end %>
 </div>