Dynamic window title

[jtomaszewski]

Currently all our admin app browser tabs are named in the same way; and the names in the browser history aren't really helpful neither:

Maybe we could add some useEffect code to https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/layout/Title.tsx that updates the document.title whenever new title is set? WDYT?

[MicroJackson]

How I do it with my React Admin:

class SettingsList extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        document.title = "Some new document title.";
    }

    ......

And it shows that in the history and as the title.
But maybe a MaterialUI update version is better.

[djhi]

@jtomaszewski Thanks for the suggestion! Would you mind creating a PR for it?

[andrico1234]

Is someone currently working on this? If not, I'd be happy to give it a shot

[andrico1234]

@djhi I got carried away 😅

#6118

[fzaninotto]

Fixed by #6119

[andrico1234]

@fzaninotto can we re-open this issue as the change was reverted. I'm going to give @wmwart's suggestion,

[fzaninotto]

Yep, the fix was reverted in #6357, so I'm reopening it.

[panfiva]

FYI, users can customize browser page title using react-helmet. See example code that can be placed in Show, Edit, List or Create components.

  <Helmet>
      <title>New page title</title>
  </Helmet>

[btoro]

FYI, users can customize browser page title using react-helmet. See example code that can be placed in Show, Edit, List or Create components.

  <Helmet>
      <title>New page title</title>
  </Helmet>

Ideally, the <Title/> component would automatically sent the title over to Helmet, rather than having users add the title to each page / view.

You can use react portals to inject the title into the <title> component of react-helmet, but unfortunately, RA adds an additional around the text, which messes up the header title.

It would be great if we can override the Title component as part of the customization / layout

[lefuturiste]

@fzaninotto I'm interested to work on this issue. Before opening a new PR, I will discuss the details here.
For a start, I propose to make this feature an opt-in change. So by default it keep the same behavior as before.
So probably we should add a new boolean prop, eg. mirrorTitleToDocumentTitle={true}

[fzaninotto]

React 19 introduces the <title> tag that does exactly that. If we can use if in a backward-compatible way (i.e. without breaking apps using React 18), it's the best solution. We could simply update PageTitle to set <title>in addition to the TitlePortal.