From 3265fff30ebd1ba8808a448ad680ac91e5f9738c Mon Sep 17 00:00:00 2001
From: Colin Darie <colin@darie.eu>
Date: Tue, 24 Jan 2023 14:27:53 +0100
Subject: [PATCH] fix(dropdown): wait "other" input to be disabled before
 autosave
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix le workflow suivant pour un champ drop down avec option "autre" :

- on choisit la valeur "autre" avec une valeur => ça autosave la bonne valeur
- on choisit finalement une autre valeur proposée => l'autosave envoyait
  la nouvelle valeur, et toujours la valeur "other" car l'input n'était pas encore
  `disabled`. Par conséquent la valeur other overridait la valeur choisie
  et ça provoquait des erreurs en cascade, notamment dans le conditionnel.
---
 app/javascript/controllers/autosave_controller.ts |  9 ++++++---
 spec/system/users/dropdown_spec.rb                | 15 +++++++++++++++
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/app/javascript/controllers/autosave_controller.ts b/app/javascript/controllers/autosave_controller.ts
index a71efd9fc..6f4389af6 100644
--- a/app/javascript/controllers/autosave_controller.ts
+++ b/app/javascript/controllers/autosave_controller.ts
@@ -89,9 +89,12 @@ export class AutosaveController extends ApplicationController {
         isCheckboxOrRadioInputElement(target) ||
         (!this.saveOnInput && isTextInputElement(target))
       ) {
-        this.enqueueAutosaveRequest();
-
-        this.showConditionnalSpinner(target);
+        // Wait next tick so champs having JS can interact
+        // with form elements before extracting form data.
+        setTimeout(() => {
+          this.enqueueAutosaveRequest();
+          this.showConditionnalSpinner(target);
+        }, 0);
       }
     }
   }
diff --git a/spec/system/users/dropdown_spec.rb b/spec/system/users/dropdown_spec.rb
index 8b288dab3..dc5cb0735 100644
--- a/spec/system/users/dropdown_spec.rb
+++ b/spec/system/users/dropdown_spec.rb
@@ -26,6 +26,21 @@ describe 'dropdown list with other option activated', js: true do
       find('.radios').find('label:last-child').find('input').select_option
       expect(page).to have_selector('.drop_down_other', visible: true)
     end
+
+    scenario "Getting back from other save the new option", js: true do
+      fill_individual
+
+      choose "Autre"
+      fill_in("Veuillez saisir votre autre choix", with: "My choice")
+
+      wait_until { user_dossier.champs_public.first.value == "My choice" }
+      expect(user_dossier.champs_public.first.value).to eq("My choice")
+
+      choose "Secondary 1.1"
+
+      wait_until { user_dossier.champs_public.first.value == "Secondary 1.1" }
+      expect(user_dossier.champs_public.first.value).to eq("Secondary 1.1")
+    end
   end
 
   context 'with select' do