Manage focus on form show/hide

This commit is contained in:
cryptogopher 2024-01-05 21:07:12 +01:00
parent 32b8daf29d
commit d28ef26dc5
3 changed files with 12 additions and 4 deletions

View File

@ -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 %>

View File

@ -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>

View File

@ -17,6 +17,7 @@ class UnitsTest < ApplicationSystemTestCase
assert_no_selector :link_or_button, text: t('units.index.add_unit')
within first('tbody > tr') do
assert_selector ':focus'
fill_in 'unit[symbol]', with: SecureRandom.random_symbol(rand(1..10))
fill_in 'unit[name]', with: [nil, SecureRandom.alphanumeric(rand(1..500))].sample
assert_difference ->{ Unit.count }, 1 do