refactor(drop_down_list_champ): other option

app/javascript/new_design/champs/drop-down-list.js

@@ -0,0 +1,20 @@
+import { delegate, show, hide } from '@utils';
+
+delegate(
+  'change',
+  '.editable-champ-drop_down_list select, .editable-champ-drop_down_list input[type="radio"]',
+  (event) => {
+    const parent = event.target.closest('.editable-champ-drop_down_list');
+    const inputGroup = parent?.querySelector('.drop_down_other');
+    if (inputGroup) {
+      const input = inputGroup.querySelector('input');
+      if (event.target.value === '__other__') {
+        show(inputGroup);
+        input.disabled = false;
+      } else {
+        hide(inputGroup);
+        input.disabled = true;
+      }
+    }
+  }
+);

app/javascript/new_design/dropdown.js

@@ -20,30 +20,3 @@ delegate('click', '.dropdown-button', (event) => {
     button.setAttribute('aria-expanded', !buttonExpanded);
   }
 });
-
-function onChangeSelectWithOther(target) {
-  const parent = target.closest('.editable-champ-drop_down_list');
-  const inputGroup = parent?.querySelector('.drop_down_other');
-  if (inputGroup) {
-    const input = inputGroup.querySelector('input');
-    if (target.value === '__other__') {
-      show(inputGroup);
-      input.disabled = false;
-    } else {
-      hide(inputGroup);
-      input.disabled = true;
-    }
-  }
-}
-
-delegate('change', '.editable-champ-drop_down_list select', (event) => {
-  onChangeSelectWithOther(event.target);
-});
-
-delegate(
-  'click',
-  '.editable-champ-drop_down_list input[type="radio"]',
-  (event) => {
-    onChangeSelectWithOther(event.target);
-  }
-);

app/javascript/packs/application.js

@@ -27,6 +27,7 @@ import '../new_design/dossiers/auto-upload';
 import '../new_design/champs/carte';
 import '../new_design/champs/linked-drop-down-list';
 import '../new_design/champs/repetition';
+import '../new_design/champs/drop-down-list';
 
 import {
   toggleCondidentielExplanation,

app/models/champs/drop_down_list_champ.rb

@@ -52,7 +52,7 @@ class Champs::DropDownListChamp < Champ
   end
 
   def other_value_present?
-    value.present? && drop_down_list_options.exclude?(value)
+    drop_down_other? && value.present? && drop_down_list_options.exclude?(value)
   end
 
   def drop_down_other?

app/views/shared/dossiers/_drop_down_other_input.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", placeholder: "Saisissez ici", disabled: !champ.other_value_present? }
+  = form.text_field :value_other, maxlength: "200", placeholder: "Saisissez ici", disabled: !champ.other_value_present?

app/views/shared/dossiers/editable_champs/_drop_down_list.html.haml

@@ -16,7 +16,7 @@
           = form.radio_button :value, Champs::DropDownListChamp::OTHER, checked: champ.other_value_present?
           Autre
   - else
-    = form.select :value, champ.options, { selected: champ.selected, required: champ.mandatory? }
+    = form.select :value, champ.options, selected: champ.selected, required: champ.mandatory?
 
   - if champ.drop_down_other?
     = render partial: "shared/dossiers/drop_down_other_input", locals: { form: form, champ: champ }