Merge pull request #7960 from betagouv/fix_moving_editor

fix(editeur de champ): corrige la perte de focus lors de l'édition de champ

app/javascript/controllers/type_de_champ_editor_controller.ts

@@ -4,12 +4,21 @@ import {
   httpRequest,
   isSelectElement,
   isCheckboxOrRadioInputElement,
-  isTextInputElement
+  isTextInputElement,
+  getConfig
 } from '@utils';
 import { useIntersection } from 'stimulus-use';
 import { AutoUpload } from '../shared/activestorage/auto-upload';
 import { ApplicationController } from './application_controller';
 
+const {
+  autosave: { debounce_delay }
+} = getConfig();
+
+const AUTOSAVE_DEBOUNCE_DELAY = debounce_delay;
+
+console.log(AUTOSAVE_DEBOUNCE_DELAY);
+
 export class TypeDeChampEditorController extends ApplicationController {
   static values = {
     typeDeChampStableId: String,
@@ -78,7 +87,7 @@ export class TypeDeChampEditorController extends ApplicationController {
 
     if (target.form && isTextInputElement(target)) {
       this.#dirtyForms.add(target.form);
-      this.debounce(this.save, 600);
+      this.debounce(this.save, AUTOSAVE_DEBOUNCE_DELAY);
     } else if (target.form && target.type == 'file' && target.files?.length) {
       const autoupload = new AutoUpload(target, target.files[0]);
       autoupload.start();

app/javascript/shared/turbo-actions.ts

@@ -38,8 +38,19 @@ const enable: TurboStreamAction = function () {
 };
 const morph: TurboStreamAction = function () {
   this.targetElements.forEach((element: Element) => {
-    morphdom(element, this.templateContent, {
+    let content: Element | DocumentFragment = this.templateContent;
-      onBeforeElUpdated(fromEl, toEl) {
+
+    // content.children ignores text node, the empty text nodes in particular
+    // so if templateContent contains an empty text node,
+    // we only keep the first element and happily morph it
+    if (content.children.length == 1) {
+      content = content.children[0];
+    }
+
+    // morphom morphes if content is an element
+    // swaps if content if a documentFragment
+    morphdom(element, content, {
+      onBeforeElUpdated: function (fromEl, toEl) {
         if (isTouchedInput(fromEl)) {
           fromEl.removeAttribute('data-touched');
           mergeInputValue(fromEl as HTMLInputElement, toEl as HTMLInputElement);

app/views/administrateurs/types_de_champ/_insert.turbo_stream.haml

@@ -12,17 +12,17 @@
 - if @created.present?
   - if @created.coordinate.previous_sibling.present?
     = turbo_stream.after dom_id(@created.coordinate.previous_sibling, :type_de_champ_editor) do
-      = render @created
+      - render @created
   - else
     = turbo_stream.prepend dom_id(@created.coordinate.block, :types_de_champ_editor_block) do
-      = render @created
+      - render @created
 
 - @morphed&.each do |champ_component|
   = turbo_stream.morph dom_id(champ_component.coordinate, :type_de_champ_editor) do
-    = render champ_component
+    - render champ_component
 
 - if @coordinate.present?
   = turbo_stream.morph dom_id(@coordinate.revision, :estimated_fill_duration) do
-    = render TypesDeChampEditor::EstimatedFillDurationComponent.new(revision: @coordinate.revision, is_annotation: @coordinate.private?)
+    - render TypesDeChampEditor::EstimatedFillDurationComponent.new(revision: @coordinate.revision, is_annotation: @coordinate.private?)
 
 = turbo_stream.dispatch 'sortable:sort'