Fix focus in NC textarea after disclose animation

DISIC · Jul 31, 2024 · 7d77fdb · 7d77fdb
1 parent bcead31
commit 7d77fdb
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/confiture-web-app/src/components/audit/CriteriumNotCompliantAccordion.vue b/confiture-web-app/src/components/audit/CriteriumNotCompliantAccordion.vue
@@ -75,15 +75,22 @@ function onFileRequestFinished() {
 const lazyAccordionRef = ref<InstanceType<typeof LazyAccordion>>();
 const commentFieldRef = ref<HTMLTextAreaElement>();
 
+let hasJustBeenSetAsNotCompliant = false;
+
 async function disclose() {
   const accordion = lazyAccordionRef.value?.accordionRef;
 
+  hasJustBeenSetAsNotCompliant = true;
   dsfr(accordion).accordionsGroup.members[0].disclose();
+}
+
+function lazyAccordionOpened() {
+  if (!hasJustBeenSetAsNotCompliant) {
+    return;
+  }
 
-  // FIXME: avoid setTimeout()
-  setTimeout(() => {
-    commentFieldRef.value?.focus();
-  }, 10);
+  commentFieldRef.value?.focus();
+  hasJustBeenSetAsNotCompliant = false;
 }
 </script>
 
@@ -92,6 +99,7 @@ async function disclose() {
     ref="lazyAccordionRef"
     title="Erreur et recommandation"
     disclose-color="var(--background-default-grey)"
+    @opened="lazyAccordionOpened"
   >
     <!-- COMMENT -->
     <div class="fr-input-group fr-mb-1w">

diff --git a/confiture-web-app/src/components/audit/LazyAccordion.vue b/confiture-web-app/src/components/audit/LazyAccordion.vue
@@ -14,6 +14,8 @@ const accordionRef = ref<HTMLDivElement>();
 
 defineExpose({ accordionRef });
 
+const emit = defineEmits(["opened"]);
+
 const showContent = ref(false);
 const uniqueId = useUniqueId();
 
@@ -23,6 +25,9 @@ function onConceal() {
 
 function onDisclose() {
   showContent.value = true;
+  requestAnimationFrame(function () {
+    emit("opened");
+  });
 }
 </script>