Metronic8 React Header Swapper prevents React-select from working on small screens
I've run into this problem while developing a react spa based on Metronic 8 React:
I've added a react-select in the header. When viewing the app on a small screen, the header is moved to a sidebar. When viewed like this, the react-select does not work. It seems something is capturing the click event before it can reach the react-select element.
When trying to fix this I updated my theme from 8.2.2 to 8.2.7. This update introduced a bug in __SwapperComponent.ts, on line 109, parentElement.querySelector(this.element.id) throws an error, because by default the element in HeaderWrapper.tsx does not have an id.
But because _SwapperComponent crashes, the select works. So the bug seems to be in _SwapperComponent.
To reproduce: In src/_metronic/layout/components/header/header-menus/MenuInner.tsx, add a ReactSelect component like this:
<ReactSelect
className="react-select-styled react-select-solid"
classNamePrefix="react-select"
options={[
{value: 1, label: "1"},
{value: 2, label: "2"},
{value: 3, label: "3"},
]}
/>In
src/_metronic/layout/components/header/HeaderWrapper.tsx add an id attribute to the div in line 98.And view the app on a small viewport. Observe that clicking the Select does not do anything. The select does work when viewed on a larger viewport.
If you reintroduce the bug in
_SwapperComponent the Select does work.Can you help fix this?
Replies (3)
Hi,
Sorry for the late reply.
We tested this in the latest version of Metronic but couldn’t reproduce the issue.
Are there any specific steps to reproduce it besides adding the react-select component to the header?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
I've created a repo to reproduce this here:
https://github.com/Grldk/Metronic
There are only a couple of commits, should be easy to follow. Started with Metronic8.27 react , added some files for lando (the docker abstraction layer we use to develop on) which you can ignore, added an id to HeaderWrapper.tsx to prevent the _SwapperComponent bug and added a React Select to MenuInner.tsx.
That's enough to reproduce this issue. If you open the website with a small viewport and open the right side bar it shows the Select. Clicking the Select does not open it. Have tested this in the most recent FireFox and Edge on Ubuntu.
Screenshot: https://i.imgur.com/TncVxec.png
Hi,
Thank you for providing the demo app. We successfully reproduced the issue, which stems from the values in the data-kt-swapper-parent attribute. Rather than appending the menu to the body element by default, it should be appended to the React root wrapper.
To resolve this, please update the attribute from:
data-kt-swapper-parent="{default: "#kt_app_body", lg: "#kt_app_header_wrapper"}"to:
data-kt-swapper-parent="{default: "#root", lg: "#kt_app_header_wrapper"}"This fix will be included in the next Metronic release.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
