Fix #17306 -- Hide time range popover when clicking outside (#20952)

* fix: attempt to make closeonclickoutside work * fix #17306 -- hide selector when clicking outside - Upgrade mantine library to 7.13.5 - Add toggleShow as TimeRangePicker onChange prop - Modify nested popover so that it doesn't use portal as suggested by mantine docs
Graylog2 · Nov 18, 2024 · 122d72e · 122d72e
1 parent 0febd8f
commit 122d72e
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 7 deletions.
diff --git a/graylog2-web-interface/package.json b/graylog2-web-interface/package.json
@@ -42,10 +42,10 @@
     ]
   },
   "dependencies": {
-    "@mantine/core": "^7.5.2",
-    "@mantine/dropzone": "^7.5.2",
-    "@mantine/hooks": "^7.5.2",
-    "@mantine/notifications": "^7.5.2",
+    "@mantine/core": "^7.13.5",
+    "@mantine/dropzone": "^7.13.5",
+    "@mantine/hooks": "^7.13.5",
+    "@mantine/notifications": "^7.13.5",
     "@openfonts/dm-sans_latin": "^1.0.2",
     "@openfonts/source-sans-pro_latin": "^1.44.2",
     "@openfonts/ubuntu-mono_latin": "^1.44.1",

diff --git a/.../components/searchbar/time-range-filter/time-range-picker/SaveTimeRangeAsPresetButton.tsx b/.../components/searchbar/time-range-filter/time-range-picker/SaveTimeRangeAsPresetButton.tsx
@@ -90,7 +90,7 @@ const TimeRangeAddToQuickListForm = ({ children, addTimerange, toggleModal, show
   const onSubmit = ({ description }: { description: string }) => addTimerange(description);
 
   return (
-    <Popover position="left" withArrow opened={show}>
+    <Popover position="left" withArrow opened={show} withinPortal={false}>
       <Popover.Target>
         {children}
       </Popover.Target>

diff --git a/...ce/src/views/components/searchbar/time-range-filter/time-range-picker/TimeRangePicker.tsx b/...ce/src/views/components/searchbar/time-range-filter/time-range-picker/TimeRangePicker.tsx
@@ -218,6 +218,7 @@ const TimeRangePicker = ({
     <Popover id="timerange-type"
              data-testid="timerange-type"
              opened={show}
+             onChange={toggleDropdownShow}
              position={position}
              withinPortal={withinPortal}
              withArrow

diff --git a/graylog2-web-interface/webpack/vendor-module-ids.json b/graylog2-web-interface/webpack/vendor-module-ids.json
@@ -1278,6 +1278,8 @@
       "javascript/esm|./node_modules/@mantine/core/esm/components/Alert/Alert.module.css.mjs": 38914,
       "javascript/esm|./node_modules/@mantine/core/esm/components/Anchor/Anchor.mjs": 29990,
       "javascript/esm|./node_modules/@mantine/core/esm/components/Anchor/Anchor.module.css.mjs": 61158,
+      "javascript/esm|./node_modules/@mantine/core/esm/components/AngleSlider/AngleSlider.mjs": 4150,
+      "javascript/esm|./node_modules/@mantine/core/esm/components/AngleSlider/AngleSlider.module.css.mjs": 3798,
       "javascript/esm|./node_modules/@mantine/core/esm/components/AppShell/AppShell.context.mjs": 74874,
       "javascript/esm|./node_modules/@mantine/core/esm/components/AppShell/AppShell.mjs": 77141,
       "javascript/esm|./node_modules/@mantine/core/esm/components/AppShell/AppShell.module.css.mjs": 43370,
@@ -1410,6 +1412,7 @@
       "javascript/esm|./node_modules/@mantine/core/esm/components/Drawer/DrawerHeader.mjs": 87978,
       "javascript/esm|./node_modules/@mantine/core/esm/components/Drawer/DrawerOverlay.mjs": 33971,
       "javascript/esm|./node_modules/@mantine/core/esm/components/Drawer/DrawerRoot.mjs": 35453,
+      "javascript/esm|./node_modules/@mantine/core/esm/components/Drawer/DrawerStack.mjs": 8383,
       "javascript/esm|./node_modules/@mantine/core/esm/components/Drawer/DrawerTitle.mjs": 22793,
       "javascript/esm|./node_modules/@mantine/core/esm/components/Fieldset/Fieldset.mjs": 66567,
       "javascript/esm|./node_modules/@mantine/core/esm/components/Fieldset/Fieldset.module.css.mjs": 97832,
@@ -1496,7 +1499,9 @@
       "javascript/esm|./node_modules/@mantine/core/esm/components/Modal/ModalHeader.mjs": 55566,
       "javascript/esm|./node_modules/@mantine/core/esm/components/Modal/ModalOverlay.mjs": 44679,
       "javascript/esm|./node_modules/@mantine/core/esm/components/Modal/ModalRoot.mjs": 29153,
+      "javascript/esm|./node_modules/@mantine/core/esm/components/Modal/ModalStack.mjs": 7515,
       "javascript/esm|./node_modules/@mantine/core/esm/components/Modal/ModalTitle.mjs": 65405,
+      "javascript/esm|./node_modules/@mantine/core/esm/components/Modal/use-modals-stack.mjs": 6193,
       "javascript/esm|./node_modules/@mantine/core/esm/components/ModalBase/ModalBase.context.mjs": 78186,
       "javascript/esm|./node_modules/@mantine/core/esm/components/ModalBase/ModalBase.mjs": 52229,
       "javascript/esm|./node_modules/@mantine/core/esm/components/ModalBase/ModalBase.module.css.mjs": 37402,
@@ -1800,12 +1805,14 @@
       "javascript/esm|./node_modules/@mantine/core/esm/core/utils/create-use-external-events/create-use-external-events.mjs": 82375,
       "javascript/esm|./node_modules/@mantine/core/esm/core/utils/deep-merge/deep-merge.mjs": 1518,
       "javascript/esm|./node_modules/@mantine/core/esm/core/utils/filter-props/filter-props.mjs": 77602,
+      "javascript/esm|./node_modules/@mantine/core/esm/core/utils/find-closest-number/find-closest-number.mjs": 7646,
       "javascript/esm|./node_modules/@mantine/core/esm/core/utils/find-element-ancestor/find-element-ancestor.mjs": 32225,
       "javascript/esm|./node_modules/@mantine/core/esm/core/utils/get-base-value/get-base-value.mjs": 43164,
       "javascript/esm|./node_modules/@mantine/core/esm/core/utils/get-breakpoint-value/get-breakpoint-value.mjs": 20280,
       "javascript/esm|./node_modules/@mantine/core/esm/core/utils/get-context-item-index/get-context-item-index.mjs": 5778,
       "javascript/esm|./node_modules/@mantine/core/esm/core/utils/get-default-z-index/get-default-z-index.mjs": 68690,
       "javascript/esm|./node_modules/@mantine/core/esm/core/utils/get-env/get-env.mjs": 89890,
+      "javascript/esm|./node_modules/@mantine/core/esm/core/utils/get-ref-prop/get-ref-prop.mjs": 2467,
       "javascript/esm|./node_modules/@mantine/core/esm/core/utils/get-safe-id/get-safe-id.mjs": 8950,
       "javascript/esm|./node_modules/@mantine/core/esm/core/utils/get-size/get-size.mjs": 56324,
       "javascript/esm|./node_modules/@mantine/core/esm/core/utils/get-sorted-breakpoints/get-sorted-breakpoints.mjs": 34294,
@@ -3703,6 +3710,7 @@
       1228,
       1237,
       1255,
+      1259,
       1264,
       1278,
       1286,
@@ -3801,6 +3809,7 @@
       2441,
       2454,
       2464,
+      2467,
       2468,
       2478,
       2513,
@@ -3900,6 +3909,7 @@
       3758,
       3771,
       3795,
+      3798,
       3839,
       3840,
       3854,
@@ -3921,6 +3931,7 @@
       4117,
       4130,
       4133,
+      4150,
       4152,
       4160,
       4175,
@@ -4028,7 +4039,6 @@
       5353,
       5356,
       5360,
-      5361,
       5362,
       5366,
       5380,
@@ -4099,6 +4109,7 @@
       6169,
       6177,
       6183,
+      6193,
       6241,
       6252,
       6269,
@@ -4213,6 +4224,7 @@
       7489,
       7502,
       7514,
+      7515,
       7535,
       7537,
       7549,
@@ -4225,6 +4237,7 @@
       7610,
       7617,
       7624,
+      7646,
       7660,
       7679,
       7681,
@@ -4292,6 +4305,7 @@
       8351,
       8368,
       8382,
+      8383,
       8418,
       8422,
       8444,
@@ -4301,7 +4315,6 @@
       8480,
       8483,
       8489,
-      8491,
       8494,
       8497,
       8508,
@@ -4719,6 +4732,7 @@
       56887,
       56939,
       57006,
+      57053,
       57088,
       57193,
       57370,