[@mantine/dates] Improve focus behavior of DatePickerInput, DateInput…

… and other components
mantinedev · Dec 12, 2024 · 7dbda1e · 7dbda1e
1 parent 9b6524d
commit 7dbda1e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/packages/@mantine/dates/src/components/DateInput/DateInput.tsx b/packages/@mantine/dates/src/components/DateInput/DateInput.tsx
@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
   __BaseInputProps,
   __InputStylesNames,
@@ -16,7 +16,7 @@ import {
   StylesApiProps,
   useInputProps,
 } from '@mantine/core';
-import { useDidUpdate } from '@mantine/hooks';
+import { useClickOutside, useDidUpdate } from '@mantine/hooks';
 import { useUncontrolledDates } from '../../hooks';
 import { CalendarLevel, DateValue } from '../../types';
 import { assignTime } from '../../utils';
@@ -135,6 +135,8 @@ export const DateInput = factory<DateInputFactory>((_props, ref) => {
     ...rest
   } = props;
 
+  const _wrapperRef = useRef<HTMLDivElement>(null);
+  const _dropdownRef = useRef<HTMLDivElement>(null);
   const [dropdownOpened, setDropdownOpened] = useState(false);
   const { calendarProps, others } = pickCalendarProps(rest);
   const ctx = useDatesContext();
@@ -250,9 +252,14 @@ export const DateInput = factory<DateInputFactory>((_props, ref) => {
     _value !== undefined && !dropdownOpened && setInputValue(formatValue(_value!));
   }, [_value]);
 
+  useClickOutside(() => setDropdownOpened(false), undefined, [
+    _wrapperRef.current!,
+    _dropdownRef.current!,
+  ]);
+
   return (
     <>
-      <Input.Wrapper {...wrapperProps} __staticSelector="DateInput">
+      <Input.Wrapper {...wrapperProps} __staticSelector="DateInput" ref={_wrapperRef}>
         <Popover
           opened={dropdownOpened}
           trapFocus={false}
@@ -280,7 +287,11 @@ export const DateInput = factory<DateInputFactory>((_props, ref) => {
               __staticSelector="DateInput"
             />
           </Popover.Target>
-          <Popover.Dropdown onMouseDown={(event) => event.preventDefault()} data-dates-dropdown>
+          <Popover.Dropdown
+            onMouseDown={(event) => event.preventDefault()}
+            data-dates-dropdown
+            ref={_dropdownRef}
+          >
             <Calendar
               __staticSelector="DateInput"
               __timezoneApplied

diff --git a/packages/@mantine/dates/src/components/MonthPickerInput/MonthPickerInput.story.tsx b/packages/@mantine/dates/src/components/MonthPickerInput/MonthPickerInput.story.tsx
@@ -1,4 +1,6 @@
 import dayjs from 'dayjs';
+import { Group } from '@mantine/core';
+import { DateInput } from '../DateInput';
 import { MonthPickerInput } from './MonthPickerInput';
 
 export default { title: 'MonthPickerInput' };
@@ -96,3 +98,12 @@ export function Sizes() {
   ));
   return <div style={{ padding: 40 }}>{sizes}</div>;
 }
+
+export function FocusReturn() {
+  return (
+    <Group>
+      <DateInput />
+      <MonthPickerInput />
+    </Group>
+  );
+}
diff --git a/packages/@mantine/dates/src/components/PickerInputBase/PickerInputBase.tsx b/packages/@mantine/dates/src/components/PickerInputBase/PickerInputBase.tsx
@@ -161,7 +161,7 @@ export const PickerInputBase = factory<PickerInputBaseFactory>((_props, ref) =>
           position="bottom-start"
           opened={dropdownOpened}
           trapFocus
-          returnFocus
+          returnFocus={false}
           unstyled={unstyled}
           {...popoverProps}
           disabled={popoverProps?.disabled || dropdownType === 'modal' || readOnly}