Fix and simplify linked-drop-down-list js

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

@@ -1,29 +1,28 @@
-addEventListener('turbolinks:load', () => {
-  const primaries = document.querySelectorAll('select[data-secondary-options]');
+import { delegate } from '@utils';
 
-  for (let primary of primaries) {
-    let secondary = document.querySelector(
-      `select[data-secondary-id="${primary.dataset.primaryId}"]`
-    );
-    let secondaryOptions = JSON.parse(primary.dataset.secondaryOptions);
+const PRIMARY_SELECTOR = 'select[data-secondary-options]';
+const SECONDARY_SELECTOR = 'select[data-secondary]';
+const CHAMP_SELECTOR = '.editable-champ';
 
-    primary.addEventListener('change', e => {
-      let option, options, element;
+delegate('change', PRIMARY_SELECTOR, evt => {
+  const primary = evt.target;
+  const secondary = primary
+    .closest(CHAMP_SELECTOR)
+    .querySelector(SECONDARY_SELECTOR);
+  const options = JSON.parse(primary.dataset.secondaryOptions);
 
-      while ((option = secondary.firstChild)) {
-        secondary.removeChild(option);
-      }
-
-      options = secondaryOptions[e.target.value];
-
-      for (let option of options) {
-        element = document.createElement('option');
-        element.textContent = option;
-        element.value = option;
-        secondary.appendChild(element);
-      }
-
-      secondary.selectedIndex = 0;
-    });
-  }
+  selectOptions(secondary, options[primary.value]);
 });
+
+function selectOptions(selectElement, options) {
+  selectElement.innerHTML = '';
+
+  for (let option of options) {
+    let element = document.createElement('option');
+    element.textContent = option;
+    element.value = option;
+    selectElement.appendChild(element);
+  }
+
+  selectElement.selectedIndex = 0;
+}

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

@@ -1,10 +1,9 @@
 - if champ.drop_down_list && champ.drop_down_list.options.any?
-  - champ_id = champ.object_id
   = form.select :primary_value,
     champ.primary_options,
     { required: champ.mandatory? },
-    { data: { "secondary-options" => champ.secondary_options, "primary-id" => champ_id } }
+    { data: { secondary_options: champ.secondary_options } }
   = form.select :secondary_value,
     champ.secondary_options[champ.primary_value],
     { required: champ.mandatory? },
-    { data: { "secondary-id" => champ_id } }
+    { data: { secondary: true } }

spec/features/new_user/linked_dropdown_spec.rb

@@ -74,7 +74,8 @@ feature 'linked dropdown lists' do
 
   def secondary_id_for(libelle)
     primary_id = primary_id_for(libelle)
-    link = find("\##{primary_id}")['data-primary-id']
-    find("[data-secondary-id=\"#{link}\"]")['id']
+    find("\##{primary_id}")
+      .ancestor('.editable-champ')
+      .find("[data-secondary]")['id']
   end
 end