[@mantine/core] Popover: Fix onClose event firing incorrectly

mantinedev · Oct 19, 2024 · 716194c · 716194c
1 parent b6767c8
commit 716194c
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 26 deletions.
diff --git a/packages/@mantine/core/src/components/Combobox/Combobox.tsx b/packages/@mantine/core/src/components/Combobox/Combobox.tsx
@@ -167,7 +167,7 @@ export function Combobox(_props: ComboboxProps) {
       <Popover
         opened={store.dropdownOpened}
         {...others}
-        onClose={onDropdownClose}
+        onChange={(_opened) => !_opened && onDropdownClose()}
         withRoles={false}
         unstyled={unstyled}
       >

diff --git a/packages/@mantine/core/src/components/Popover/Popover.story.tsx b/packages/@mantine/core/src/components/Popover/Popover.story.tsx
@@ -27,7 +27,7 @@ export function Uncontrolled() {
       }}
     >
       <div style={{ padding: 40 }}>
-        <Popover>
+        <Popover onClose={() => console.log('closed')} onOpen={() => console.log('opened')}>
           <Popover.Target>
             <button type="button">Toggle popover</button>
           </Popover.Target>
@@ -125,6 +125,8 @@ export function Controlled() {
         trapFocus
         radius="md"
         returnFocus
+        onClose={() => console.log('closed')}
+        onOpen={() => console.log('opened')}
       >
         <Popover.Target>
           <button type="button" onClick={() => setState((c) => !c)}>

diff --git a/packages/@mantine/core/src/components/Popover/use-popover.ts b/packages/@mantine/core/src/components/Popover/use-popover.ts
@@ -118,7 +118,7 @@ function getPopoverMiddlewares(
 }
 
 export function usePopover(options: UsePopoverOptions) {
-  const [_opened, setOpened, isControlled] = useUncontrolled({
+  const [_opened, setOpened] = useUncontrolled({
     value: options.opened,
     defaultValue: options.defaultOpened,
     finalValue: false,
@@ -127,20 +127,11 @@ export function usePopover(options: UsePopoverOptions) {
 
   const onClose = () => {
     if (_opened) {
-      !isControlled && options.onClose?.();
       setOpened(false);
     }
   };
 
-  const onToggle = () => {
-    if (_opened) {
-      options.onClose?.();
-      setOpened(false);
-    } else {
-      options.onOpen?.();
-      setOpened(true);
-    }
-  };
+  const onToggle = () => setOpened(!_opened);
 
   const floating: UseFloatingReturn<Element> = useFloating({
     strategy: options.strategy,
@@ -160,12 +151,12 @@ export function usePopover(options: UsePopoverOptions) {
   }, [floating.placement]);
 
   useDidUpdate(() => {
-    if (!options.opened) {
+    if (!_opened) {
       options.onClose?.();
     } else {
       options.onOpen?.();
     }
-  }, [options.opened, isControlled]);
+  }, [_opened, options.onClose, options.onOpen]);
 
   return {
     floating,

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

diff --git a/packages/@mantine/dates/src/components/PickerInputBase/PickerInputBase.tsx b/packages/@mantine/dates/src/components/PickerInputBase/PickerInputBase.tsx
@@ -165,9 +165,11 @@ export const PickerInputBase = factory<PickerInputBaseFactory>((_props, ref) =>
           unstyled={unstyled}
           {...popoverProps}
           disabled={popoverProps?.disabled || dropdownType === 'modal' || readOnly}
-          onClose={() => {
-            popoverProps?.onClose?.();
-            handleClose();
+          onChange={(_opened) => {
+            if (!_opened) {
+              popoverProps?.onClose?.();
+              handleClose();
+            }
           }}
         >
           <Popover.Target>

diff --git a/packages/@mantine/tiptap/src/RichTextEditorControl/RichTextEditorColorPickerControl.tsx b/packages/@mantine/tiptap/src/RichTextEditorControl/RichTextEditorColorPickerControl.tsx
@@ -72,7 +72,13 @@ export const RichTextEditorColorPickerControl = forwardRef<
   ));
 
   return (
-    <Popover opened={opened} withinPortal trapFocus onClose={close} {...popoverProps}>
+    <Popover
+      opened={opened}
+      withinPortal
+      trapFocus
+      onChange={(_opened) => !_opened && close()}
+      {...popoverProps}
+    >
       <Popover.Target>
         <RichTextEditorControl
           {...others}

diff --git a/packages/@mantine/tiptap/src/RichTextEditorControl/RichTextEditorLinkControl.tsx b/packages/@mantine/tiptap/src/RichTextEditorControl/RichTextEditorLinkControl.tsx
@@ -120,7 +120,7 @@ export const RichTextEditorLinkControl = factory<RichTextEditorLinkControlFactor
         shadow="md"
         withinPortal
         opened={opened}
-        onClose={handleClose}
+        onChange={(_opened) => !_opened && handleClose()}
         offset={-44}
         zIndex={10000}
         {...popoverProps}