fix(instruction): open justificatif picker and focus its file input

Clicking "Ajouter un justificatif" hid the button while it held focus. coldwired's hide() moves focus to the previous focusable element, so focus jumped to the motivation textarea. It also only revealed the file input's "Parcourir" button instead of opening the picker.

Now the file input is clicked to open the native picker, and focus is sent to it through coldwired's focus action, applied before hide so the button no longer holds focus and hide does not steal it back to motivation.

Author: colinux

app/javascript/new_design/instruction-button.ts

@@ -1,4 +1,4 @@
-import { disable, enable, hide, show } from 'coldwired/actions';
+import { disable, dispatchAction, enable, hide, show } from 'coldwired/actions';
 import { isInputElement } from 'coldwired/utils';
 
 export function showMotivation(event: Event, state: string) {
@@ -46,6 +46,15 @@ export function deleteJustificatif(name: string) {
 }
 
 export function showImportJustificatif(name: string) {
+  const justificatif = document.querySelector(
+    `#dossier_justificatif_motivation_${name}`
+  );
+
   show(`#justificatif_motivation_import_${name}`);
+  dispatchAction({ action: 'focus', targets: justificatif });
   hide(`#justificatif_motivation_suggest_${name}`);
+
+  if (isInputElement(justificatif)) {
+    justificatif.click();
+  }
 }

spec/system/instructeurs/instruction_spec.rb

@@ -128,6 +128,22 @@
     expect(dossier.reload.state).to eq(Dossier.states.fetch(:refuse))
   end
 
+  scenario 'moves focus to the justificatif file input when adding a justificatif' do
+    dossier.passer_en_instruction!(instructeur: instructeur)
+    login_as(instructeur.user, scope: :user)
+
+    visit instructeur_dossier_path(procedure, dossier)
+    click_on 'Rendre une décision'
+
+    within('.instruction-button') { find_link('Refuser').click }
+    expect(page).to have_field('motivation_refuse')
+
+    within('.refuse.motivation') { click_on 'Ajouter un justificatif' }
+
+    expect(page).to have_css('#dossier_justificatif_motivation_refuse:focus')
+    expect(page).to have_no_css('#motivation_refuse:focus')
+  end
+
   scenario 'A instructeur can follow/unfollow a dossier and request an export' do
     login_as(instructeur.user, scope: :user)
     visit instructeur_procedures_path