add other option for dropdown select

app/javascript/new_design/dropdown.js

@@ -32,6 +32,11 @@ const radioInputs = Array.from(
 const radioNotices = Array.from(
   document.querySelectorAll('.drop_down_other_radio_notice')
 );
+
+const selectNotices = Array.from(
+  document.querySelectorAll('.drop_down_other_select_notice')
+);
+
 const selectInputs = Array.from(
   document.querySelectorAll('.text_field_drop_down_other_select')
 );
@@ -53,6 +58,7 @@ const selectObject = selects.map((select, index) => {
   return {
     select: select,
     input: selectInputs[index],
+    notice: selectNotices[index],
     key: select.getAttribute('name')
   };
 });
@@ -61,10 +67,10 @@ for (const el of selectObject) {
   selects.forEach((select) => {
     select.addEventListener('change', () => {
       if (el.select.value === 'Autre') {
-        el.input.style.display = 'block';
+        el.notice.style.display = 'block';
         el.input.setAttribute('name', el.key);
       } else {
-        el.input.style.display = 'none';
+        el.notice.style.display = 'none';
         el.input.setAttribute('name', '');
       }
     });

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

@@ -22,7 +22,11 @@
 
   - else
     = form.select :value,
-      champ.options,
-      disabled: champ.disabled_options,
-      required: champ.mandatory?
+      champ.drop_down_other? ? champ.options.concat(["Autre"]) : champ.options,
+      { selected: champ.other_value_present? ? "Autre" : champ.value,
+        required: champ.mandatory? },
+      { class: champ.drop_down_other? ? "select_drop_down_other" : ""}
 
+    - if champ.drop_down_other?
+      .notice.drop_down_other_select_notice{ style: "#{champ.other_value_present? ? "display:block" : "display:none"}" }
+        = render partial: "shared/dossiers/drop_down_other_input", locals: { champ: champ, class_name: "text_field_drop_down_other_select" }