@indico-data/design-system 3.6.4 → 3.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "3.6.4",
+  "version": "3.7.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/forms/date/datePicker/DatePicker.tsx

@@ -4,6 +4,7 @@ import { DatePickerProps } from './types';
 import { getCommonProps } from './contants';
 import { TimePicker } from '../../timePicker/TimePicker';
 import { Col, Row } from '../../../grid';
+import { useEffect, useRef } from 'react';
 
 export const DatePicker = (props: DatePickerProps) => {
   const {
@@ -84,9 +85,33 @@ export const DatePicker = (props: DatePickerProps) => {
   };
 
   const finalProps = { ...commonProps, ...rest, ...modeProps };
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  // Disable tab focus on all date picker elements
+  useEffect(() => {
+    const disableTabFocus = () => {
+      if (wrapperRef.current) {
+        const focusableElements = wrapperRef.current.querySelectorAll(
+          'button, input, select, textarea, a, [tabindex]:not([tabindex="-1"])',
+        );
+        focusableElements.forEach((element) => {
+          (element as HTMLElement).tabIndex = -1;
+        });
+      }
+    };
+
+    // Run immediately and set up observer for dynamic elements
+    disableTabFocus();
+    const observer = new MutationObserver(disableTabFocus);
+    if (wrapperRef.current) {
+      observer.observe(wrapperRef.current, { childList: true, subtree: true });
+    }
+
+    return () => observer.disconnect();
+  }, []);
 
   return (
-    <div className="date-picker-wrapper">
+    <div className="date-picker-wrapper" tabIndex={-1} ref={wrapperRef}>
       {hasTimePicker && (
         <div className="time-picker-wrapper">
           <Row align="center">