fix(select_champ_position): rewire for more robust and easier implementation which work with repetition avoiding double submit

app/components/types_de_champ_editor/select_champ_position_component/select_champ_position_component.html.haml

@@ -1,3 +1,3 @@
-.fr-ml-3w.flex.select-position
+= form_with(url: move_and_morph_admin_procedure_type_de_champ_path(@coordinate.revision.procedure, @coordinate.type_de_champ.stable_id), class: 'fr-ml-3w flex', method: :patch, data: { turbo: true }) do |f|
   = label_tag :target_stable_id, "Déplacer le champ", for: describedby_id, class: 'flex align-center flex-no-shrink fr-mr-3w' 
-  = select_tag :target_stable_id, options_for_select(options), id: describedby_id, class: 'fr-select', aria: { discribedby: describedby_id }, data: { 'select-champ-position-template-target': 'select', action: 'change->type-de-champ-editor#onMoveAndMorphChange', selected: @coordinate.stable_id } 
+  = select_tag :target_stable_id, options_for_select(options), id: describedby_id, class: 'fr-select', aria: { discribedby: describedby_id }, data: { 'select-champ-position-template-target': 'select', selected: @coordinate.stable_id } 

app/components/types_de_champ_editor/select_champ_template_position_component/select_champ_template_position_component.html.haml

@@ -1,5 +1,5 @@
 %div{ id: block_id, data: { 'select-champ-position-template-target': 'template', turbo_force: :server } }
   %select
-    %option{ selected: :selected } Selectionner une option
+    %option{ disabled: :disabled } Selectionner une option
     - @coordinates.each do |coordinate|
       %option{ value: coordinate.stable_id }= "#{coordinate.position} #{coordinate.libelle}"

app/javascript/controllers/select_champ_position_template_controller.ts

@@ -7,18 +7,14 @@ export class SelectChampPositionTemplateController extends ApplicationController
   };
   // this element is updated via turbostream as the source of truth for all select
   declare readonly templateIdValue: string;
-
   declare readonly selectTargets: HTMLSelectElement[];
 
   selectTargetConnected(selectElement: HTMLSelectElement) {
-    selectElement.addEventListener('blur', this);
     selectElement.addEventListener('focus', this);
     selectElement.addEventListener('change', this);
   }
 
   selectTargetDisconnected(selectElement: HTMLSelectElement) {
-    console.log('selectTargetDisconnected');
-    selectElement.removeEventListener('blur', this);
     selectElement.removeEventListener('focus', this);
     selectElement.removeEventListener('change', this);
   }
@@ -62,9 +58,8 @@ export class SelectChampPositionTemplateController extends ApplicationController
     const stableIdDidChange =
       changedSelectTarget.value !=
       this.getStableIdForSelect(changedSelectTarget);
-    if (!stableIdDidChange) {
-      // prevent to bulble up
-      event.stopImmediatePropagation();
+    if (stableIdDidChange) {
+      changedSelectTarget.form?.requestSubmit();
     }
   }
 

app/javascript/controllers/type_de_champ_editor_controller.ts

@@ -17,14 +17,12 @@ export class TypeDeChampEditorController extends ApplicationController {
     typeDeChampStableId: String,
     moveUrl: String,
     moveUpUrl: String,
-    moveDownUrl: String,
-    moveAndMorphUrl: String
+    moveDownUrl: String
   };
 
   declare readonly moveUrlValue: string;
   declare readonly moveUpUrlValue: string;
   declare readonly moveDownUrlValue: string;
-  declare readonly moveAndMorphUrlValue: string;
   declare readonly isVisible: boolean;
 
   #latestPromise = Promise.resolve();
@@ -56,14 +54,6 @@ export class TypeDeChampEditorController extends ApplicationController {
     this.requestSubmitForm(form);
   }
 
-  onMoveAndMorphChange(event: ActionEvent) {
-    const form = createForm(this.moveAndMorphUrlValue, 'patch');
-    const target = event.target as HTMLSelectElement;
-
-    createHiddenInput(form, target.name, target.value);
-    this.requestSubmitForm(form);
-  }
-
   private onChange(event: Event) {
     matchInputElement(event.target, {
       file: (target) => {

spec/system/administrateurs/types_de_champ_spec.rb

@@ -233,4 +233,38 @@ describe 'As an administrateur I can edit types de champ', js: true do
       expect(page).to have_content("Le titre de section suivant est invalide, veuillez le corriger :")
     end
   end
+
+  context 'move and morph champs' do
+    let(:procedure) { create(:procedure, types_de_champ_public: [{ type: :text, libelle: 'first_tdc' }, { type: :text, libelle: 'middle_tdc' }, { type: :text, libelle: 'last_tdc' }]) }
+    let!(:initial_first_coordinate) { procedure.draft_revision.revision_types_de_champ[0] }
+    let!(:initial_second_coordinate) { procedure.draft_revision.revision_types_de_champ[1] }
+    let!(:initial_third_coordinate) { procedure.draft_revision.revision_types_de_champ[2] }
+    # TODO: check no select when 1 champs
+    # TODO: check empty select when 1 champs
+    # TODO: check select is seeding on focus
+    # TODO: check select.change move champ and keep order
+    # TODO: select options are segmented by block
+    scenario 'root champs' do
+      initial_order = [initial_first_coordinate, initial_second_coordinate, initial_third_coordinate].map(&:stable_id)
+      initial_first_coordinate_selector = "##{ActionView::RecordIdentifier.dom_id(initial_first_coordinate, :move_and_morph)}"
+      # at first, select only contains the current coordinate
+      expect(page).to have_selector("#{initial_first_coordinate_selector} option", count: 1)
+      expect(page.find(initial_first_coordinate_selector).all("option").first.value.to_s).to eq(initial_first_coordinate.stable_id.to_s)
+
+      # once clicked, the select is updated other options
+      page.find(initial_first_coordinate_selector).click
+      expect(page).to have_selector("#{initial_first_coordinate_selector} option", count: 4)
+      #   also we re-hydrate the selected value
+      expect(page.find(initial_first_coordinate_selector).find("option[selected]").value.to_s).to eq(initial_first_coordinate.stable_id.to_s)
+      page.find(initial_first_coordinate_selector).select(initial_third_coordinate.libelle)
+      wait_until do
+        procedure.reload.draft_revision.revision_types_de_champ.last.type_de_champ.libelle == initial_first_coordinate.type_de_champ.libelle
+      end
+      expect(procedure.reload.draft_revision.revision_types_de_champ.map(&:stable_id))
+        .to eq([initial_second_coordinate, initial_third_coordinate, initial_first_coordinate].map(&:stable_id))
+    end
+
+    scenario 'repetition champs' do
+    end
+  end
 end