fix blocker nav for basepath

Add test view for manual testing.
Test script doesn't fail on double click.

flow-server/src/main/resources/com/vaadin/flow/server/frontend/Flow.tsx

@@ -28,7 +28,7 @@ import {
     useBlocker,
     useLocation,
     useNavigate,
-    type NavigateOptions,
+    type NavigateOptions, useHref,
 } from "react-router-dom";
 import type { AgnosticRouteObject } from '@remix-run/router';
 import { createPortal } from "react-dom";
@@ -278,6 +278,7 @@ function Flow() {
     const containerRef = useRef<RouterContainer | undefined>(undefined);
     const roundTrip = useRef<Promise<void> | undefined>(undefined);
     const queuedNavigate = useQueuedNavigate(roundTrip, navigated);
+    const basename = useHref('/');
 
     // portalsReducer function is used as state outside the Flow component.
     const [portals, dispatchPortalAction] = useReducer(portalsReducer, []);
@@ -366,7 +367,7 @@ function Flow() {
                 // Blocker is handled and the new navigation
                 // gets queued to be executed after the current handling ends.
                 const {pathname, state} = blocker.location;
-                queuedNavigate(pathname, true, { state: state, replace: true });
+                queuedNavigate(pathname.substring(basename.length), true, { state: state, replace: true });
                 return;
             }
             blockerHandled.current = true;

flow-tests/test-react-router/pom-production.xml

@@ -34,6 +34,18 @@
             <version>${project.version}</version>
         </dependency>
 
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>flow-react</artifactId>
+            <version>${project.version}</version>
+        </dependency>
+
+        <dependency>
+            <groupId>org.seleniumhq.selenium</groupId>
+            <artifactId>selenium-chrome-driver</artifactId>
+            <version>4.26.0</version>
+            <scope>test</scope>
+        </dependency>
     </dependencies>
 
     <build>

flow-tests/test-react-router/pom.xml

@@ -38,6 +38,19 @@
             <version>${project.version}</version>
         </dependency>
 
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>flow-react</artifactId>
+            <version>${project.version}</version>
+        </dependency>
+
+        <dependency>
+            <groupId>org.seleniumhq.selenium</groupId>
+            <artifactId>selenium-chrome-driver</artifactId>
+            <version>4.26.0</version>
+            <scope>test</scope>
+        </dependency>
+
     </dependencies>
 
     <build>

flow-tests/test-react-router/src/main/frontend/NavigateView.tsx

@@ -0,0 +1,22 @@
+import {useNavigate} from "react-router-dom";
+import {
+    ReactAdapterElement,
+    RenderHooks
+} from "Frontend/generated/flow/ReactAdapter";
+
+ class NavigateView extends ReactAdapterElement {
+     protected render(hooks: RenderHooks): React.ReactElement | null {
+         const navigate = useNavigate();
+
+         return (
+             <>
+                 <p id="react">This is a simple view for a React route</p>
+                 <button id="react-navigate" onClick={() => navigate("com.vaadin.flow.RouterView"!)}>
+                     Navigate button
+                 </button>
+             </>
+         );
+     }
+ }
+
+customElements.define('navigate-view', NavigateView);

flow-tests/test-react-router/src/main/java/com/vaadin/flow/ReactNavigateView.java

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2000-2024 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+package com.vaadin.flow;
+
+import com.vaadin.flow.component.Tag;
+import com.vaadin.flow.component.dependency.JsModule;
+import com.vaadin.flow.component.react.ReactAdapterComponent;
+import com.vaadin.flow.router.Route;
+
+@Route("com.vaadin.flow.ReactNavigateView")
+@Tag("navigate-view")
+@JsModule("NavigateView.tsx")
+public class ReactNavigateView extends ReactAdapterComponent {
+
+}

flow-tests/test-react-router/src/test/java/com/vaadin/flow/ReactNavigateIT.java

@@ -0,0 +1,75 @@
+/*
+ * Copyright 2000-2024 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+package com.vaadin.flow;
+
+import java.io.IOException;
+import java.time.Duration;
+import java.util.HashMap;
+import java.util.Map;
+
+import com.google.common.collect.ImmutableMap;
+import org.junit.After;
+import org.junit.Before;
+import org.junit.Test;
+import org.openqa.selenium.chrome.ChromeDriver;
+import org.openqa.selenium.remote.CommandExecutor;
+import org.openqa.selenium.support.ui.ExpectedConditions;
+import org.openqa.selenium.remote.Command;
+
+import com.vaadin.flow.component.html.testbench.NativeButtonElement;
+import com.vaadin.flow.testutil.ChromeBrowserTest;
+import com.vaadin.testbench.TestBenchDriverProxy;
+
+public class ReactNavigateIT extends ChromeBrowserTest {
+
+    @Test
+    public void testSlowNavigation_clickReactNavigateButtonTwice_noExceptionInLogs()
+            throws IOException {
+        open();
+        ChromeDriver driver = (ChromeDriver) ((TestBenchDriverProxy) getDriver())
+                .getWrappedDriver();
+
+        CommandExecutor executor = driver.getCommandExecutor();
+        Map map = new HashMap();
+        map.put("offline", false);
+        map.put("latency", 100);
+
+        map.put("download_throughput", 1800);
+        map.put("upload_throughput", 400);
+
+        executor.execute(new Command(driver.getSessionId(),
+                "setNetworkConditions", ImmutableMap.of("network_conditions",
+                        ImmutableMap.copyOf(map))));
+
+        waitUntil(drvr -> $(NativeButtonElement.class).id("react-navigate")
+                .isDisplayed());
+
+        NativeButtonElement navigateButton = $(NativeButtonElement.class)
+                .id("react-navigate");
+
+        // timout and requestAnimationFrame will give an undefined for the
+        // button.
+        driver.executeScript("arguments[0].click();arguments[0].click();",
+                navigateButton);
+
+        waitUntil(ExpectedConditions.stalenessOf(navigateButton));
+
+        checkLogsForErrors();
+
+    }
+
+}