menuinner.tsx is duplicating content
I have simple content calling up a name of a backend cell - and periodically (usually on a page change) it arrays it across the top. I can't pickup a pattern. It does it by itself.
This is the top of the dashboard wrapper when the error happens.
Also sometimes it doesn't duplicate it but it pushes the first one way to the right. I cant seem to inspect what is causing this.
Replies (5)
For those who are using version 8 and still looking for a solution, here is a quick fix.
Search for elment with id=kt_app_header_menu_wrapper (in HeaderWrapper.tsx) and remove attribbute data-kt-swapper='true'.
Now you will have a z-index problem with drawer overlay in mobile view. To solve it:
1- Find _DrawerComponent.ts (in src/_metronic/assets/ts/components).
2- Find this line:
document.body.append(this.overlayElement)
3- Replace it with this piece of code:
if (this.element.getAttribute('id') == 'kt_app_header_menu_wrapper') {
this.element.parentElement.append(this.overlayElement)
} else {
document.body.append(this.overlayElement)
}
I guess you will be fine enough. Good luck.
It sounds like a rendering issue within your menuinner.tsx component—possibly a state or prop-driven loop that's unintentionally re-rendering elements or failing to reset properly between page changes. I've seen similar issues when components aren't unmounted or cleaned up correctly. While not directly related, I use the software DuplicateFilesDeleter for managing file-level duplication, and your issue reminds me how messy unexpected duplicates—whether files or UI elements—can be. I'd recommend checking your component’s useEffect dependencies, key props in lists, and conditional rendering logic. A cleanup or refactor might help isolate the trigger. Want help reviewing your component logic?
Hi,
Could you please specify which theme and version you are using?
Does your element have attribute data-kt-swapper='true'?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
React / Metronic 8 demo 1
here is what files have that dataswapper true
but the element that I see duplicating is in mennuinner.tsx
essentially this is what the element is wrapped in:
I have picked up a little bit of a pattern that when it breaks to mobile or the window is sized or on a view change going back to the dashboard triggers the duplication of the header content like the screenshot above in the original post.
I have no idea what is causing it. It does it super often.
Hi,
We encountered a duplicated menu issue in an older version of Metronic, which was caused by a problem with the Metronic Swapper component. This issue has been resolved in the latest version of Metronic.
Could you please update the src/_metronic/assets/ts/components/_SwapperComponent.ts with the one from the latest version of Metronic?
Additionally, let us know if you see any errors in your browser console.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
