(PC-33528)[PRO] feat: handle scroll and focus when multiselect has error

pass-culture · Jan 21, 2025 · af365e6 · af365e6
1 parent ebec9fe
commit af365e6
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/pro/src/components/ScrollToFirstErrorAfterSubmit/ScrollToFirstErrorAfterSubmit.tsx b/pro/src/components/ScrollToFirstErrorAfterSubmit/ScrollToFirstErrorAfterSubmit.tsx
@@ -4,9 +4,11 @@ import { useEffect } from 'react'
 import { doesUserPreferReducedMotion } from 'commons/utils/windowMatchMedia'
 
 const scrollToFirstError = () => {
-  const firstErrorElement = document.querySelector<
-    HTMLInputElement | HTMLElement
-  >('[aria-invalid="true"]')
+  const firstErrorElement =
+    document.querySelector<HTMLInputElement | HTMLElement>(
+      '[aria-invalid="true"]'
+    ) ?? document.querySelector<HTMLElement>('[data-error="true"]')
+
   const scrollBehavior = doesUserPreferReducedMotion() ? 'auto' : 'smooth'
 
   // Without the setTimeout, the smooth behavior isn't working

diff --git a/pro/src/ui-kit/MultiSelect/MultiSelectTrigger.tsx b/pro/src/ui-kit/MultiSelect/MultiSelectTrigger.tsx
@@ -42,6 +42,7 @@ export const MultiSelectTrigger = ({
         aria-expanded={isOpen}
         aria-controls={id}
         disabled={disabled}
+        data-error={!!error}
       >
         <div className={styles['trigger-content']}>
           {selectedCount > 0 && (