Fix #48934 - Focus on text input on danger confirmation

app/assets/javascripts/confirm_danger_modal.js

@@ -2,13 +2,16 @@ import $ from 'jquery';
 import { rstrip } from './lib/utils/common_utils';
 
 function openConfirmDangerModal($form, text) {
+  const $input = $('.js-confirm-danger-input');
+  $input.val('');
+
   $('.js-confirm-text').text(text || '');
-  $('.js-confirm-danger-input').val('');
   $('#modal-confirm-danger').modal('show');
 
   const confirmTextMatch = $('.js-confirm-danger-match').text();
   const $submit = $('.js-confirm-danger-submit');
   $submit.disable();
+  $input.focus();
 
   $('.js-confirm-danger-input').off('input').on('input', function handleInput() {
     const confirmText = rstrip($(this).val());

changelogs/unreleased/48934.yml

+---
+title: Improve danger confirmation modals by focusing input field
+merge_request:
+author: Jamie Schembri
+type: added

spec/features/groups_spec.rb

@@ -154,6 +154,12 @@ describe 'Group' do
       end
     end
 
+    it 'focuses confirmation field on remove group' do
+      click_button('Remove group')
+
+      expect(page).to have_selector '#confirm_name_input:focus'
+    end
+
     it 'removes group' do
       expect { remove_with_confirm('Remove group', group.path) }.to change {Group.count}.by(-1)
       expect(group.members.all.count).to be_zero

spec/features/projects/settings/user_transfers_a_project_spec.rb

@@ -10,7 +10,7 @@ describe 'Projects > Settings > User transfers a project', :js do
     sign_in(user)
   end
 
-  def transfer_project(project, group)
+  def transfer_project(project, group, confirm: true)
     visit edit_project_path(project)
 
     page.within('.js-project-transfer-form') do
@@ -21,6 +21,8 @@ describe 'Projects > Settings > User transfers a project', :js do
 
     click_button('Transfer project')
 
+    return unless confirm
+
     fill_in 'confirm_name_input', with: project.name
 
     click_button 'Confirm'
@@ -28,6 +30,11 @@ describe 'Projects > Settings > User transfers a project', :js do
     wait_for_requests
   end
 
+  it 'focuses on the confirmation field' do
+    transfer_project(project, group, confirm: false)
+    expect(page).to have_selector '#confirm_name_input:focus'
+  end
+
   it 'allows transferring a project to a group' do
     old_path = project_path(project)
     transfer_project(project, group)

spec/features/projects_spec.rb

@@ -155,6 +155,12 @@ describe 'Project' do
       visit edit_project_path(project)
     end
 
+    it 'focuses on the confirmation field' do
+      click_button 'Remove project'
+
+      expect(page).to have_selector '#confirm_name_input:focus'
+    end
+
     it 'removes a project' do
       expect { remove_with_confirm('Remove project', project.path) }.to change { Project.count }.by(-1)
       expect(page).to have_content "Project '#{project.full_name}' is in the process of being deleted."