How do you prevent blocker if only url search params have changed?

[0xturner]

I am using useBlocker to prevent navigation if the user has unsaved changes on the page. The page also uses a search query param as a method of toggling a tab within the page.

useBlocker("Your changes are not saved", formState.isDirty);

const enableFeatureX = () => {
  navigate({
    search: {featureX: true},
  });
};

When I call enableFeatureX I do not want to trigger the blocker since it's not technically navigating the user away from the page. Is there any way to update url search params without triggering the blocker?

[0xturner]

In case anyone else stumbles upon this looking for a solution to the same issue, I did figure out a workaround, although it feels a tad hacky and the pattern may not be suitable for every scenario.

  const navigate = useNavigate();
  const [navigateSearchArgs, setNavigateSearchArgs] = useState(null);
   // if navigateSearchArgs exists, there is a pending search param change so unmount the `Block`
  const isBlockMounted = !navigateSearchArgs;

  const queueEnableFeatureX = () => {
    setNavigateSearchArgs({featureX: true});
  };

  useEffect(() => {
    if (!navigateSearchArgs) return;
    navigate({search: {navigateSearchArgs}});
    setNavigateSearchArgs(null); // reset after navigate is called so that `Block` is remounted
  }, [navigate, navigateSearchArgs]);

  return (
    <>
      <button onClick={queueEnableFeatureX}>Enable</button>
      {isBlockMounted && (
        <Block message="Your changes are not saved" condition={true} />
      )}
    </>
  );

Instead of calling navigate directly the event handler can "queue" the navigation to happen in a secondary side effect. This gives the opportunity to temporarily unmount and remount the Block component while navigate is called.

[RomanChasovitin]

I would like to agree with you. I want to have the same functionality, but I can't implement it now.

[ThomasStock]

+1 I have the exact same issue

[seedy]

Seems this answer from @tannerlinsley is applicable there.
#119

Prompt uses the native blocking mechanisms of the browser, so out of the box, no. I'm not sure of a good way to do this in any system TBH.

[0xturner]

Newer versions of the the library now have a ignoreBlocker option: https://tanstack.com/router/latest/docs/framework/react/api/router/NavigateOptionsType#ignoreblocker