From 36b95048f841136f61931fa86ae26aedc6f7efc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20van=20der=20Sande?=
 <jeremie.vandersande@gmail.com>
Date: Sat, 22 Oct 2022 11:20:22 +0200
Subject: [PATCH] [@mantine/core] Popover: Fix infinite loop when component is
 used with Preact (#2752)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Jérémie van der Sande <jeremie.van-der-sande@ubisoft.com>
---
 src/mantine-core/src/Popover/Popover.tsx | 28 ++++++++++++++++--------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/mantine-core/src/Popover/Popover.tsx b/src/mantine-core/src/Popover/Popover.tsx
index 95b797dbd84..b5cab790815 100644
--- a/src/mantine-core/src/Popover/Popover.tsx
+++ b/src/mantine-core/src/Popover/Popover.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unused-prop-types */
 
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useCallback } from 'react';
 import { useId, useClickOutside } from '@mantine/hooks';
 import {
   useMantineTheme,
@@ -209,6 +209,22 @@ export function Popover(props: PopoverProps) {
     dropdownNode,
   ]);
 
+  const reference = useCallback(
+    (node: HTMLElement) => {
+      setTargetNode(node);
+      popover.floating.reference(node);
+    },
+    [popover.floating.reference]
+  );
+
+  const floating = useCallback(
+    (node: HTMLElement) => {
+      setDropdownNode(node);
+      popover.floating.floating(node);
+    },
+    [popover.floating.floating]
+  );
+
   return (
     <StylesApiProvider
       classNames={classNames}
@@ -221,14 +237,8 @@ export function Popover(props: PopoverProps) {
           returnFocus,
           disabled,
           controlled: popover.controlled,
-          reference: (node) => {
-            setTargetNode(node as HTMLElement);
-            popover.floating.reference(node);
-          },
-          floating: (node) => {
-            setDropdownNode(node);
-            popover.floating.floating(node);
-          },
+          reference,
+          floating,
           x: popover.floating.x,
           y: popover.floating.y,
           arrowX: popover.floating?.middlewareData?.arrow?.x,