fix(material): untrack focus call

POC: https://playground.solidjs.com/anonymous/28140e55-d880-4a44-946c-ae5243192cf9
swordev · Nov 22, 2022 · c4a5197 · c4a5197
1 parent 64eae19
commit c4a5197
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/.changeset/quiet-dolls-compare.md b/.changeset/quiet-dolls-compare.md
@@ -0,0 +1,5 @@
+---
+"@suid/material": patch
+---
+
+Fix `autoFocus` property in `MenuItem` component
diff --git a/packages/material/src/MenuItem/MenuItem.tsx b/packages/material/src/MenuItem/MenuItem.tsx
@@ -16,7 +16,8 @@ import {
   useContext,
   splitProps,
   mergeProps,
-  createRenderEffect,
+  createEffect,
+  untrack,
 } from "solid-js";
 
 const $ = createComponentFactory<MenuItemTypeMap>()({
@@ -202,17 +203,17 @@ const MenuItem = $.defineComponent(function MenuItem(inProps) {
     },
   };
 
-  createRenderEffect(() => {
+  createEffect(() => {
     if (baseProps.autoFocus) {
       if (menuItemRef.current) {
-        menuItemRef.current.focus();
+        untrack(() => menuItemRef.current.focus());
       } else if (process.env.NODE_ENV !== "production") {
         console.error(
           "MUI: Unable to set focus to a MenuItem whose component has not been rendered."
         );
       }
     }
-  }, [baseProps.autoFocus]);
+  });
 
   const ownerState = mergeProps(props, {
     get dense() {