I'm not aware of a native way to reparent in Vuejs. Can you share how you'd go about doing this?

Hi,

To fix this issue you should wrap your code with the nextTick function as shown below.

onMounted(() => {
 nextTick(() => {
 actionsMenuInstance.value = new KTReparent(actionsMenu.value, {
 mode: "append",
 target: "#redbox"
 })
 });
});

I've tried this and every time I click on a dropdown launch button I get this error:

https://imgur.com/a/mSm7htM

any idea why this is happening?

Hi,

We have the same error if we create KTReparent instance directly inside onMounted function, but if you wrap your code with nextTick it should solve the problem.

Replace this code

onMounted(() => {
 actionsMenuInstance.value = new KTReparent(actionsMenu.value, {
 mode: "append",
 target: "#redbox"
 })
 })

onMounted(() => {
 nextTick(() => {
 actionsMenuInstance.value = new KTReparent(actionsMenu.value, {
 mode: "append",
 target: "#redbox"
 })
 });
});

I've tried that and it still doesn't work for me. Here is the code I'm using:

https://gist.github.com/gespinha/558d511cb4da95dd4732ca4f64267eec

When I embed that Vue component anywhere I get the same error I showed before when I click on '.dropdown-toggle'

I was looking at the dropdown.ts code an found that this is returning 'null':

'this._contentElement = this._element.querySelector('.dropdown-content, [data-dropdown-content="true"]')'

So there isn't any '.dropdown-content' found.

Hi,

We didn't get any errors when testing your code in our Vue example app.

Are you using the latest Metronic 9 version?

Do you still have our global components initialization code?

Regards,
Lauris Stepanovs,
Keenthemes Support Team

I put a quick example of the latest version of Metronic 9 together so you can see what I'm experiencing: https://codesandbox.io/p/github/gespinha/metronic-reparent-bug/main?import=true

(I'll be deleting the env after you check it out)

You'll see that I'm running the code you shared on ExampleMenu.vue and .dropdown-content is reparented to #redbox, but when I click .dropdown-toggle I'm getting the error I shared above:

"Uncaught TypeError: Cannot read properties of null (reading 'style')"

Hi,

To fix this you should reparent the entire menu element together with the toggle element.
You can just move the ref="actionsMenu" attribute to the root element of your component.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Right, but that means I'm reparenting both dropdown button and dropdown menu.

What I wanted was to have the button in one area of the and move the dropdown to another area.

Is this not possible?

Hi,

To clarify, you're looking to have a simple HTML menu for desktop, and on mobile, you want it to transform into a menu with a toggle button. Is that correct?

If so, you could approach this differently. First, add the menu directly into your container. Then, for mobile screens, use KTReparent to dynamically move the menu into the designated menu component.

Regards,
Lauris Stepanovs,
Keenthemes Support Team