Merge pull request #8491 from colinux/fix-drop-down-other-value-override

Fix: champ "autre" d'une liste déroulante qui écrasait une option de la liste

app/assets/stylesheets/forms.scss

@@ -163,6 +163,12 @@
     }
   }
 
+  .drop_down_other { // scss-lint:disable SelectorFormat
+    label {
+      font-weight: normal;
+    }
+  }
+
   input[type=text],
   input[type=email],
   input[type=password],

app/components/editable_champ/drop_down_other_input_component/drop_down_other_input_component.html.haml

@@ -1,4 +1,4 @@
 .drop_down_other{ class: @champ.other_value_present? ? '' : 'hidden' }
   .notice
-    %p Veuillez saisir votre autre choix
-  = @form.text_field :value_other, maxlength: 200, size: nil, disabled: !@champ.other_value_present?
+    %label{ for: dom_id(@champ, :value_other) } Veuillez saisir votre autre choix
+  = @form.text_field :value_other, maxlength: 200, size: nil, id: dom_id(@champ, :value_other), disabled: !@champ.other_value_present?

app/javascript/controllers/autosave_controller.ts

@@ -89,9 +89,12 @@ export class AutosaveController extends ApplicationController {
         isCheckboxOrRadioInputElement(target) ||
         (!this.saveOnInput && isTextInputElement(target))
       ) {
-        this.enqueueAutosaveRequest();
-
-        this.showConditionnalSpinner(target);
+        // Wait next tick so champs having JS can interact
+        // with form elements before extracting form data.
+        setTimeout(() => {
+          this.enqueueAutosaveRequest();
+          this.showConditionnalSpinner(target);
+        }, 0);
       }
     }
   }

app/javascript/controllers/champ_dropdown_controller.ts

@@ -34,6 +34,7 @@ export class ChampDropdownController extends ApplicationController {
         if (target.value == '__other__') {
           show(inputGroup);
           input.disabled = false;
+          input.focus();
         } else {
           hide(inputGroup);
           input.disabled = true;

spec/system/users/dropdown_spec.rb

@@ -26,6 +26,21 @@ describe 'dropdown list with other option activated', js: true do
       find('.radios').find('label:last-child').find('input').select_option
       expect(page).to have_selector('.drop_down_other', visible: true)
     end
+
+    scenario "Getting back from other save the new option", js: true do
+      fill_individual
+
+      choose "Autre"
+      fill_in("Veuillez saisir votre autre choix", with: "My choice")
+
+      wait_until { user_dossier.champs_public.first.value == "My choice" }
+      expect(user_dossier.champs_public.first.value).to eq("My choice")
+
+      choose "Secondary 1.1"
+
+      wait_until { user_dossier.champs_public.first.value == "Secondary 1.1" }
+      expect(user_dossier.champs_public.first.value).to eq("Secondary 1.1")
+    end
   end
 
   context 'with select' do