wrong Tab Titles using History

[DarioViva42]

Description of the bug

When I switch views I expect the title in the browser tab to reflect this change.
In my demo application (a simple vaadin application created with vaadin-start) I have two views. The empty view and the Hello World view.

Now, I can switch between these views and the title always changes to the correct name, representing the view that is currently displayed. But when using the history by navigating back the title is no longer correct it now always lags one view “behind”.

Weirdly this bug only appears in chromium based browsers (chrome, edge, vivaldi, …) but it works in other browsers (firefox, safari)

Also this bug was not present in Vaadin 24.3.17. But since 24.4.1 I get this weird behaviour.

Here is an overview of where I get the buggy behaviour.

	Vaadin 24.3.17	Vaadin 24.4.1
Chrome 128.0.6613.86	✅	❌
Firefox 129.0.2	✅	✅
Safari 17.5	✅	✅

I can somehow not build the project using 24.4.0, com.vaadin:flow-server:jar:24.4.0.rc2 is blocked on our network, but only for this specific version?!

Expected behavior

I expect the handling of tab titles to work in all browsers, also chrome using the newest Vaadin version.

Minimal reproducible example

https://github.com/DarioViva42/vaadinHistoryBug

On the main branch the project uses 24.4 and on the branch called working the project uses 24.3.

Because in 24.4 the frontend folder was moved (#18898), this project has two frontend folders to work with 24.3 and 24.4 (I did not copy all styles from one folder to the other, so styling will look a little wonky under 24.3 but the relevant part for this issue can still be demonstrated)

Versions

• Vaadin / Flow version: 24.4.x (at least up to 24.4.11 (Flow 24.4.7)
• Java version: 21
• OS version: Sonoma 14.5 (pretty sure that the same bug exists on windows / linux

[DarioViva42]

This has maybe the same root issue as #14255.

[knoobie]

Please use the latest 24.4.x version - 24.4.1 is like 10 bug fix versions behind.

[MichaelPluessErni]

@knoobie This issue still appears in Vaadin verison 24.4.10.

[DarioViva42]

@knoobie I knew I forgot to mention some details.
I wanted to make it as easy as possible by providing the very last version, that not had the bug, and the very first version, that did. But obviously specifying, that it also does not work on the latest version is always helpful.
The issue still appears in the latest 24.4.x version (Vaadin 24.4.11 & Flow 24.4.7)

You can use branch latest in the demonstration project or bumping the version yourself.

[simasch]

It looks like it has something to do with the React router.
If I add this to the application.properties the problem seems to disappear:

vaadin.react.enable=false 

@DarioViva42 (Salü Dario)
Can you please verify if this helps in your application?

[DarioViva42]

@simasch Hey Simon 👋

This also seems to fix it on my end. However, there is a weird lag, between the update of the document and the update of the tab-title. This lag only exists for history items that are navigated to for the first time. After that (by going forward again) the tab-title updates the same time. Clearly visible at the end of the video.
I don't get the same behaviour on firefox where it is instant all the time.

Screen.Recording.2024-09-09.at.18.38.32.mov

What are the side effect of disabling react?

(liebsti griess us basel ins seeland)

[caalador]

Had a look at this and it seems the title update is done before the navigation is finished when using the react-router.
So this seems to be a timing issue where the returned execute statements are eagerly executed before react navigation has updated the history.

[vaadin-bot]

This ticket/PR has been released with Vaadin 24.5.0.beta4 and is also targeting the upcoming stable 24.5.0 version.

[vaadin-bot]

This ticket/PR has been released with Vaadin 24.4.13.

[MichaelPluessErni]

Tested with version 24.4.13 in Chrome and unfortunately the issue still occurs.
When navigating back through the page history, the wrong (previous) Tab title is displayed.