Language switch without reloading
Hello,
I would like to switch the language on react demo2 without reloading the entire page. I implemented it and it all works fine, except that the HeaderUserMenu and other dropdown menus cannot be opened after language has been switched. I have to reload the page for it to work.
I have tried Menucomponent.reinitialization() in the useEffect of the Topbar and in the menu itself, but neither of it worked.
I would appreaciate it if you could point me in the right direction and to help understand the logic of the menu initialization as it causes some issues in our development.
Thanks,
Tamas
Replies (11)
Hi Tamas,
Can you try to put 500ms delay for initialization function?
setTimeout(() => {
MenuComponent. reinitialization()
}, 500)Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hey Lauris,
Yes, I tried both in the Topbar useeffect and the HeaderUserMenu dropdown menu as well, unfortunately nothing worked. The language switch makes a simple API call to change the language on the backend and frontend. Everything is successful, the language is changed, the Auth component with all its children gets re-rendered on this user profile change but the Topbar dropdown menus stop working, until I completely refresh the page.
I would like to understand why is this and how can we work around it.
Thank you for your help,
Tamas
Hi Tamas,
We are initializing elements on page first load inside src/_metronic/layout/MasterInit.tsx, when you rerender your menu elements they will not have our event listeners anymore and you need to reinitialize MenuComponent to add our menu event listeners and make menu working.
Firstly make sure that your useEffect function get triggered and Menu component is initialized.
If menu useEffect is triggered then for test try to wrap MenuComponent. reinitialization() with 500ms setTimeout.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Lauris,
I have this in HeaderUserMenu:
const HeaderUserMenu: FC<Props> = ({user}) => {
useEffect(() => {
console.log("Menu rendered")
setTimeout(() => {
MenuComponent.reinitialization()
}, 500)
}, [])
...When the language is changed, the message is logged so useeffect does run, but something is not working. I have made a short recording of the behaviour:
https://ibb.co/7SSmNS6
It seems that the click is picked up, but the proper classes are not added to show the menu.
Any ideas where the bug could be?
Thanks,
Tamas
Hi,
For now, it is hard to tell what might cause an issue.
Do you still use react-intl?
Also, could you please describe your language switch implementation? So we can check this on our side.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Yes, I still use react-intl. Here is the Language switch implementation:
const Languages: FC = () => {
const intl = useIntl()
const [updateUserProfile] = useUpdateUserProfileMutation()
const currentLanguage = languages.find((x) => x.lang === intl.locale)
const switchLanguage = async (language: AvailableLanguages) => {
// Save language setting on backend
if (intl.locale !== language) {
try {
await updateUserProfile({language: language as AvailableLanguages})
} catch (err) {
console.error("Server error")
}
}
}
return (
<div
className="menu-item px-5"
data-kt-menu-trigger="hover"
data-kt-menu-placement="left-start"
data-kt-menu-flip="bottom"
>
<a href="#" className="menu-link px-5">
<span className="menu-title position-relative">
Language
<span className="fs-8 rounded bg-light px-3 py-2 position-absolute translate-middle-y top-50 end-0">
{currentLanguage?.name}{" "}
<img
className="w-15px h-15px rounded-1 ms-2"
src={currentLanguage?.flag}
alt="metronic"
/>
</span>
</span>
</a>
<div className="menu-sub menu-sub-dropdown w-175px py-4">
{languages.map((l) => (
<div
className="menu-item px-3"
key={l.lang}
onClick={() => switchLanguage(l.lang as AvailableLanguages)}
>
<a
href="#"
className={clsx("menu-link d-flex px-5", {active: l.lang === currentLanguage?.lang})}
>
<span className="symbol symbol-20px me-4">
<img className="rounded-1" src={l.flag} alt="metronic" />
</span>
{l.name}
</a>
</div>
))}
</div>
</div>
)
}useUpdateUserProfileMutation is a simple PUT request mutation using RTK Query that saves the language setting on the backend and caches it using redux.
This language setting is hooked into I18nProvider, which gets and provides the user language data. It gets the refreshed data from the backend every time the language is changed. All is working well, except the menus, although they are correctly re-rendered on every change as well.
What do you think?
Thanks,
Tamas
Hi Tamas,
This component looks fine.
Do all your menu components stop working or only menus that contains translations?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Lauris,
This is the thing, the menu components I am testing with, do not have any translations, they don't even import from react-intl.
It seems that the ThemeMode switcher still works on hover, the drawers are also opening, the search button (kt_header_search) is also working, but the HeaderNotificationsMenu, QuickLinks and HeaderUserMenu are not working.
Thanks
Tamas
Hi Tamas,
Sorry for the later reply.
We tried to reproduce this issue and still without success, it seems like issue is related to your custom implementation and without debugging it is hard to say what might cause an issue.
If you are reinitializing MenuComponent on language change and all of the menus were initialized correctly then menus should be working.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Lauris,
I've found the issue finally! It seems that there was an issue when using antd ConfigProvider:
<IntlProvider locale={locale} messages={messages}>
<ConfigProvider locale={locale === "en" ? en : undefined}>{children}</ConfigProvider>
</IntlProvider>The "undefined" value created a silent bug and somehow it killed the MenuComponents only without producing any error messages. Changing the logic and always defining a locale in the ConfigProvider fixed the issue.
Thank you for all your help with this.
Best wishes,
Tamas
Hi,
Glad to hear that you fixed this issue. All the best with your project!
Regards,
Lauris Stepanovs,
Keenthemes Support Team
