Use referentially stable refs in SelectUnstyled and MultiSelectUnstyled

mui · Aug 17, 2022 · a110cd6 · a110cd6
1 parent a97ea42
commit a110cd6
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git a/packages/mui-base/src/ButtonUnstyled/useButton.ts b/packages/mui-base/src/ButtonUnstyled/useButton.ts
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-  unstable_setRef as setRef,
   unstable_useForkRef as useForkRef,
   unstable_useIsFocusVisible as useIsFocusVisible,
 } from '@mui/utils';
@@ -9,7 +8,15 @@ import extractEventHandlers from '../utils/extractEventHandlers';
 import { EventHandlers } from '../utils/types';
 
 export default function useButton(parameters: UseButtonParameters) {
-  const { disabled = false, focusableWhenDisabled, href, ref, tabIndex, to, type } = parameters;
+  const {
+    disabled = false,
+    focusableWhenDisabled,
+    href,
+    ref: externalRef,
+    tabIndex,
+    to,
+    type,
+  } = parameters;
   const buttonRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement>();
 
   const [active, setActive] = React.useState<boolean>(false);
@@ -148,15 +155,13 @@ export default function useButton(parameters: UseButtonParameters) {
     }
   };
 
-  const handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
-  const handleRef = useForkRef(ref, handleOwnRef);
+  const updateHostElementName = React.useCallback((instance: HTMLElement | null) => {
+    setHostElementName(instance?.tagName ?? '');
+  }, []);
 
-  const updateRef = React.useCallback(
-    (instance: HTMLElement | null) => {
-      setHostElementName(instance?.tagName ?? '');
-      setRef(handleRef, instance);
-    },
-    [handleRef],
+  const handleRef = useForkRef(
+    updateHostElementName,
+    useForkRef(externalRef, useForkRef(focusVisibleRef, buttonRef)),
   );
 
   interface AdditionalButtonProps {
@@ -212,7 +217,7 @@ export default function useButton(parameters: UseButtonParameters) {
       onMouseDown: createHandleMouseDown(externalEventHandlers),
       onMouseLeave: createHandleMouseLeave(externalEventHandlers),
       onMouseUp: createHandleMouseUp(externalEventHandlers),
-      ref: updateRef as React.Ref<any>,
+      ref: handleRef,
     };
   };
 

diff --git a/packages/mui-base/src/MultiSelectUnstyled/MultiSelectUnstyled.tsx b/packages/mui-base/src/MultiSelectUnstyled/MultiSelectUnstyled.tsx
@@ -122,13 +122,13 @@ const MultiSelectUnstyled = React.forwardRef(function MultiSelectUnstyled<TValue
   const ListboxRoot = components.Listbox ?? 'ul';
   const Popper = components.Popper ?? PopperUnstyled;
 
-  const handleButtonRefChange = (element: HTMLElement | null) => {
+  const handleButtonRefChange = React.useCallback((element: HTMLElement | null) => {
     buttonRef.current = element;
 
     if (element != null) {
       setButtonDefined(true);
     }
-  };
+  }, []);
 
   const handleButtonRef = useForkRef(ref, handleButtonRefChange);
 

diff --git a/packages/mui-base/src/SelectUnstyled/SelectUnstyled.tsx b/packages/mui-base/src/SelectUnstyled/SelectUnstyled.tsx
@@ -115,13 +115,13 @@ const SelectUnstyled = React.forwardRef(function SelectUnstyled<TValue>(
   const ListboxRoot = components.Listbox ?? 'ul';
   const Popper = components.Popper ?? PopperUnstyled;
 
-  const handleButtonRefChange = (element: HTMLElement | null) => {
+  const handleButtonRefChange = React.useCallback((element: HTMLElement | null) => {
     buttonRef.current = element;
 
     if (element != null) {
       setButtonDefined(true);
     }
-  };
+  }, []);
 
   const handleButtonRef = useForkRef(ref, handleButtonRefChange);