[React DOM Interactions] useListNavigation onNavigate not called in production builds

We came across a bug in our application that uses @floating-ui/react-dom-interactions@0.11.0 and the useListNavigation hook not calling the provided onNavigate callback function but only in production builds.

Our application is bundled/built with Vite.

We found in production builds that keyboard events were no longer working for lists created by useListNavigation. I spent hours debugging our production builds attempting to find the culprit.

It appears to be something related to the usage of the useEvent hook. I’m not exactly sure what it is about that hook that is causing the problem, but the conditional useInsertionEffect and the check for the existence of that hook look suspicious at first glance.

We ended up patching useListNavigation in our app as follows which clears the issue up and gets things working again:

--- a/dist/floating-ui.react-dom-interactions.esm.js
+++ b/dist/floating-ui.react-dom-interactions.esm.js
@@ -2286,8 +2286,8 @@ const useListNavigation = function (_ref, _temp2) {
   const parentId = useFloatingParentNodeId();
   const tree = useFloatingTree();
   const previousOpen = usePrevious(open);
-  const onNavigate = useEvent(unstable_onNavigate);
-  const previousOnNavigate = useEvent(usePrevious(unstable_onNavigate));
+  const onNavigate = unstable_onNavigate;
+  const previousOnNavigate = usePrevious(unstable_onNavigate);
   const focusItemOnOpenRef = React.useRef(focusItemOnOpen);
   const indexRef = React.useRef(selectedIndex != null ? selectedIndex : -1);
   const keyRef = React.useRef(null);

I’d happily provide a PR to refactor the useEvent usage, but it’s not clear to me why this hook exists in the first place. It seems to me to be unnecessary. It’s not clear why useInsertionEffect would even be necessary at any point (at first glance anyways).

[atomiks]

0.13.0 — there is a small breaking change, but it only requires a 1 prop change. It’s preparing for release now

[erictaylor]

Trying that change now locally and verified the minified production version comes out right.

const useInsertionEffect = React$m['useInsertionEffect'.toString()],
  useSafeInsertionEffect = useInsertionEffect || ((mn) => mn());
function useEvent(mn) {
  const Cn = react.exports.useRef(() => {});
  return (
    useSafeInsertionEffect(() => {
      Cn.current = mn;
    }),
    react.exports.useCallback(function () {
      for (var Pn = arguments.length, Rn = new Array(Pn), On = 0; On < Pn; On++)
        Rn[On] = arguments[On];
      return Cn.current == null ? void 0 : Cn.current(...Rn);
    }, [])
  );
}