State of useNavigation() is not idle when navigating from a url with search params back to ".."

[yongzhang]

Hi, team

I have routes look like this:

/ids.jsx
/ids/$id.jsx

/ids is used to list information of id, one list item has a link like this:

      <Link to={`${id}?mode=delete`}>
        Delete
      </Link>

This will go to the id modal page with mode search param, which is correct, I also have a form in that id page:

  const navigation = useNavigation();
  const isSubmitting = navigation.state !== 'idle';

<Form method="delete">
        <button>
          {isSubmitting ? Deleting : Confirm Delete}
        </button>
        <Link to=".." >
          Cancel
        </Link>
</Form>

When I click Cancel, I expect navigating to parent route, which is ids and nothing should happen, but I see Deleting in the form button, I don't understand why, and how to fix this, please help, thanks.