[@mantine/dates] Fix popoverProps.onClose overriding original compo…

…nent value in DatePickerInput and other similar components (#4105)
mantinedev · Feb 26, 2024 · bd74e63 · bd74e63
1 parent 49ecef5
commit bd74e63
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/packages/@mantine/dates/src/components/DatePickerInput/DatePickerInput.story.tsx b/packages/@mantine/dates/src/components/DatePickerInput/DatePickerInput.story.tsx
@@ -9,7 +9,11 @@ export default { title: 'DatePickerInput' };
 export function Usage() {
   return (
     <div style={{ padding: 40, maxWidth: 400 }}>
-      <DatePickerInput placeholder="Date picker input" />
+      <DatePickerInput
+        placeholder="Date picker input"
+        // eslint-disable-next-line no-console
+        popoverProps={{ onClose: () => console.log('close') }}
+      />
     </div>
   );
 }

diff --git a/packages/@mantine/dates/src/components/PickerInputBase/PickerInputBase.tsx b/packages/@mantine/dates/src/components/PickerInputBase/PickerInputBase.tsx
@@ -161,12 +161,15 @@ export const PickerInputBase = factory<PickerInputBaseFactory>((_props, ref) =>
         <Popover
           position="bottom-start"
           opened={dropdownOpened}
-          onClose={handleClose}
-          disabled={dropdownType === 'modal' || readOnly}
           trapFocus
           returnFocus
           unstyled={unstyled}
           {...popoverProps}
+          disabled={popoverProps?.disabled || dropdownType === 'modal' || readOnly}
+          onClose={() => {
+            popoverProps?.onClose?.();
+            handleClose();
+          }}
         >
           <Popover.Target>
             <Input