refactor(spinner): dependent-conditions on champ wrapper instead of each champ

app/assets/stylesheets/forms.scss

@@ -534,6 +534,11 @@
       margin-right: 0;
     }
   }
+
+  fieldset ~ .spinner {
+    position: relative;
+    top: -($default-fields-spacer / 2);
+  }
 }
 
 [data-react-component-value]:not([data-react-component-value^="ComboMultiple"]) {

app/components/editable_champ/checkbox_component/checkbox_component.html.haml

@@ -1,4 +1,4 @@
 = @form.check_box :value,
-  { required: @champ.required?, id: @champ.input_id, checked: @champ.true?, aria: { describedby: @champ.describedby_id }, data: data_dependent_conditions  },
+  { required: @champ.required?, id: @champ.input_id, checked: @champ.true?, aria: { describedby: @champ.describedby_id } },
   'true',
   'false'

app/components/editable_champ/decimal_number_component/decimal_number_component.html.haml

@@ -3,5 +3,4 @@
   aria: { describedby: @champ.describedby_id },
   step: :any,
   placeholder: "3.14",
-  required: @champ.required?,
+  required: @champ.required?
-  data: data_dependent_conditions

app/components/editable_champ/drop_down_list_component/drop_down_list_component.html.haml

@@ -1,6 +1,6 @@
 - if @champ.options?
   - if @champ.render_as_radios?
-    %fieldset.radios{ data: data_dependent_conditions }
+    %fieldset.radios
       - @champ.enabled_non_empty_options.each do |option|
         %label
           = @form.radio_button :value, option
@@ -16,7 +16,7 @@
           = @form.radio_button :value, Champs::DropDownListChamp::OTHER, checked: @champ.other_value_present?
           Autre
   - else
-    = @form.select :value, @champ.options_without_empty_value_when_mandatory(@champ.options), { selected: @champ.selected }, required: @champ.mandatory?, id: @champ.input_id, aria: { describedby: @champ.describedby_id }, data: data_dependent_conditions
+    = @form.select :value, @champ.options_without_empty_value_when_mandatory(@champ.options), { selected: @champ.selected }, required: @champ.mandatory?, id: @champ.input_id, aria: { describedby: @champ.describedby_id }
 
   - if @champ.drop_down_other?
     = render EditableChamp::DropDownOtherInputComponent.new(form: @form, champ: @champ)

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?, data: data_dependent_conditions
+  = @form.text_field :value_other, maxlength: 200, size: nil, disabled: !@champ.other_value_present?

app/components/editable_champ/editable_champ_base_component.rb

@@ -2,8 +2,4 @@ class EditableChamp::EditableChampBaseComponent < ApplicationComponent
   def initialize(form:, champ:, seen_at: nil)
     @form, @champ, @seen_at = form, champ, seen_at
   end
-
-  def data_dependent_conditions
-    { "dependent-conditions": "true" } if @champ.dependent_conditions?
-  end
 end

app/components/editable_champ/editable_champ_component.rb

@@ -23,7 +23,7 @@ class EditableChamp::EditableChampComponent < ApplicationComponent
         "hidden": !@champ.visible?
       ),
       id: @champ.input_group_id,
-      data: { controller: stimulus_controller }
+      data: { controller: stimulus_controller, **data_dependent_conditions }
     }
   end
 
@@ -45,4 +45,12 @@ class EditableChamp::EditableChampComponent < ApplicationComponent
       controllers.join(' ')
     end
   end
+
+  def data_dependent_conditions
+    if @champ.dependent_conditions?
+      { "dependent-conditions": "true" }
+    else
+      {}
+    end
+  end
 end

app/components/editable_champ/integer_number_component/integer_number_component.html.haml

@@ -2,5 +2,4 @@
   id: @champ.input_id,
   aria: { describedby: @champ.describedby_id },
   placeholder: 5,
-  required: @champ.required?,
+  required: @champ.required?
-  data: data_dependent_conditions

app/components/editable_champ/multiple_drop_down_list_component/multiple_drop_down_list_component.html.haml

@@ -1,6 +1,6 @@
 - if @champ.options?
   - if @champ.render_as_checkboxes?
-    = @form.collection_check_boxes(:value, @champ.enabled_non_empty_options, :to_s, :to_s, data: data_dependent_conditions) do |b|
+    = @form.collection_check_boxes(:value, @champ.enabled_non_empty_options, :to_s, :to_s) do |b|
       - tag.div(class: 'editable-champ editable-champ-checkbox') do
         - b.label do
           - b.check_box({ multiple: true, checked: @champ&.selected_options&.include?(b.value), aria: { describedby: @champ.describedby_id } }) + b.text

app/components/editable_champ/number_component/number_component.html.haml

@@ -2,5 +2,4 @@
   id: @champ.input_id,
   aria: { describedby: @champ.describedby_id },
   placeholder: @champ.libelle,
-  required: @champ.required?,
+  required: @champ.required?
-  data: data_dependent_conditions

app/components/editable_champ/text_component/text_component.html.haml

@@ -1,5 +1,4 @@
 = @form.text_field :value,
   id: @champ.input_id,
   required: @champ.required?,
-  aria: { describedby: @champ.describedby_id },
+  aria: { describedby: @champ.describedby_id }
-  data: data_dependent_conditions

app/components/editable_champ/yes_no_component/yes_no_component.html.haml

@@ -1,4 +1,4 @@
-%fieldset.radios{ data: data_dependent_conditions }
+%fieldset.radios
   %label
     = @form.radio_button :value, true
     Oui

app/javascript/controllers/autosave_controller.ts

@@ -111,28 +111,26 @@ export class AutosaveController extends ApplicationController {
   }
 
   private showConditionnalSpinner(target: HTMLInputElement) {
-    if (target.dataset.dependentConditions) {
+    const champWrapperElement = target.closest(
-      this.showSpinner(target);
+      '.editable-champ[data-dependent-conditions]'
+    );
+
+    if (!champWrapperElement) {
       return;
     }
 
-    // for some champs, like checkbox, spinner is attached on fieldset
+    this.showSpinner(champWrapperElement);
-    const parentFieldset = target.closest('fieldset');
-
-    if (parentFieldset?.dataset?.dependentConditions) {
-      this.showSpinner(parentFieldset);
-    }
   }
 
-  private showSpinner(champElement: HTMLElement) {
+  private showSpinner(champElement: Element) {
     this.#spinnerTimeoutId = setTimeout(() => {
       // do not do anything if there is already a spinner for this champ, like SIRET champ
-      if (!champElement.nextElementSibling?.classList.contains('spinner')) {
+      if (!champElement.querySelector('.spinner')) {
         const spinner = document.createElement('div');
         spinner.classList.add('spinner', 'spinner-removable');
         spinner.setAttribute('aria-live', 'live');
         spinner.setAttribute('aria-label', 'Chargement en cours…');
-        champElement.after(spinner);
+        champElement.appendChild(spinner);
       }
     }, AUTOSAVE_CONDITIONAL_SPINNER_DEBOUNCE_DELAY);
   }