Merge pull request #8846 from marmelab/fix-Title-i18n-change

Fix AppBar Title disappears on locale change

Author: fzaninotto

packages/ra-ui-materialui/src/button/LocalesMenuButton.spec.tsx

@@ -1,6 +1,12 @@
 import * as React from 'react';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { Basic } from './LocalesMenuButton.stories';
+import {
+    fireEvent,
+    render,
+    screen,
+    waitFor,
+    within,
+} from '@testing-library/react';
+import { Basic, FullApp } from './LocalesMenuButton.stories';
 
 describe('LocalesMenuButton', () => {
     it('should allow to change language', async () => {
@@ -16,5 +22,30 @@ describe('LocalesMenuButton', () => {
         await waitFor(() => {
             expect(screen.queryByText('Tableau de bord')).not.toBeNull();
         });
+
+        fireEvent.click(screen.getAllByText('Français')[0]);
+        fireEvent.click(screen.getByText('English'));
+        await waitFor(() => {
+            expect(screen.queryByText('Dashboard')).not.toBeNull();
+        });
+    });
+
+    it('should not make the title disappear', async () => {
+        const { container } = render(<FullApp />);
+
+        await screen.findByText('War and Peace');
+        let title = container.querySelector(
+            '#react-admin-title'
+        ) as HTMLElement;
+        expect(within(title).queryByText('Books')).not.toBeNull();
+
+        fireEvent.click(screen.getAllByText('English')[0]);
+        expect(screen.queryAllByText('English').length).toEqual(2);
+        expect(screen.queryByText('Français')).not.toBeNull();
+        fireEvent.click(screen.getByText('Français'));
+
+        await screen.findAllByText('Livres');
+        title = container.querySelector('#react-admin-title') as HTMLElement;
+        expect(within(title).queryByText('Livres')).not.toBeNull();
     });
 });

packages/ra-ui-materialui/src/layout/Title.tsx

@@ -18,7 +18,10 @@ export const Title = (props: TitleProps) => {
     // on first mount, we don't have the container yet, so we wait for it
     useEffect(() => {
         setContainer(container => {
-            if (container) return container;
+            const isInTheDom =
+                typeof document !== 'undefined' &&
+                document.body.contains(container);
+            if (container && isInTheDom) return container;
             return typeof document !== 'undefined'
                 ? document.getElementById('react-admin-title')
                 : null;