Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

Action dropdown


Action dropdown sometimes opened, sometimes not opened

Vue
demo 8
V 8.2.4


<a
href="#"
class="btn btn-sm btn-light btn-active-light-primary fs-8"
data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-end"
data-kt-menu-flip="top-end"
>{{ t("actions") }}
<KTIcon icon-name="down" icon-class="fs-8 m-0" />
</a>
<div
class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-900 menu-state-bg-light-primary fw-semibold fs-7 w-60px py-4"
data-kt-menu="true"
>


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (10)


Hi,

Unfortunately, we were not able to reproduce this problem in the latest Metronic version.

Are there any specific steps on how we can reproduce it?

Also, please let us know if you have any errors in your browser console when clicking on the menu toggle element.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



please tell me where can I check files to sure if the issue resolved in my code



Hi,

Could you please attach your entire menu file? The part you paste in the question doesn't have any problems.

Regards,
Lauris Stepanovs,
Keenthemes Support Team




<button
class="btn btn-sm btn-light btn-active-light-primary fs-8"
data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-end"
data-kt-menu-flip="top-end"
>
{{ t("actions") }}
<KTIcon icon-name="down" icon-class="fs-8 m-0" />
</button>
<div
class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fs-7 w-50px py-2"
data-kt-menu="true"
>
<div class="menu-item px-3" v-if="row.isSystemControlled">
<button
class="btn btn-icon btn-light-success w-30px h-30px me-2 menu-link"
:title="t("view")"
@click="handelToView(true, row.id)"
>
<ViewIcon />
</button>
</div>
</div>



Hi,

We have tested your code and it works fine. However, there is rendering condition in your components that needs attention. Please ensure that your menu element is rendered correctly.

Additionally, verify that the MenuComponent initialization still exists in the src/core/plugins/keenthemes.ts file.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



yes, MenuComponent initialization still exists in the src/core/plugins/keenthemes.ts file

import {
DrawerComponent,
MenuComponent,
ScrollComponent,
StickyComponent,
SwapperComponent,
ToggleComponent,
} from "@/assets/ts/components";
import { ThemeModeComponent } from "@/assets/ts/layout";
import type { App } from "vue";
import KTIcon from "@/core/helpers/kt-icon/KTIcon.vue";

/**
* @description Initialize KeenThemes custom components
*/
const initializeComponents = () => {
ThemeModeComponent.init();
setTimeout(() => {
ToggleComponent.bootstrap();
StickyComponent.bootstrap();
MenuComponent.bootstrap();
ScrollComponent.bootstrap();
DrawerComponent.bootstrap();
SwapperComponent.bootstrap();
}, 0);
};

/**
* @description Reinitialize KeenThemes custom components
*/
const reinitializeComponents = () => {
ThemeModeComponent.init();
setTimeout(() => {
ToggleComponent.reinitialization();
StickyComponent.reInitialization();
MenuComponent.reinitialization();
reinitializeScrollComponent().then(() => {
ScrollComponent.updateAll();
});
DrawerComponent.reinitialization();
SwapperComponent.reinitialization();
}, 0);
};

const reinitializeScrollComponent = async () => {
await ScrollComponent.reinitialization();
};

/**
* Initialize KTIcon global component instance
* @param app vue instance
*/
function initKtIcon(app: App<Element>) {
app.component("KTIcon", KTIcon);
}

export {
initializeComponents,
reinitializeComponents,
reinitializeScrollComponent,
initKtIcon,
};



Hi,

The src/core/plugins/keenthemes.ts just contains helper functions for our components initialization.

Make sure that initializeComponents is triggered in src/App.vue.


onMounted(() => {
nextTick(() => {
initializeComponents();
});
});


Regards,
Lauris Stepanovs,
Keenthemes Support Team



In src/App.vue I have :


onMounted(() => {
nextTick(() => {
initializeComponents();

bodyStore.removeBodyClassName("page-loading");


});
});



when i click on router-link then back to open actions button
its open


<template v-slot:more="{ row: row }">
<router-link
:to="PATHS(row.id)"
class="btn btn-icon btn-secondary w-30px h-30px me-3"
>
<KTIcon icon-name="tablet-text-down" icon-class="fs-1 mx-2" />
</router-link>
<router-link
:to="PATHS(syncSource)"
class="btn btn-icon btn-light-primary w-30px h-30px me-3"
>
<KTIcon icon-name="text-number" icon-class="fs-1 mx-2" />
</router-link>
<button
class="btn btn-sm btn-light btn-active-light-primary fs-8"
data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-end"
data-kt-menu-flip="top-end"
>
{{ t("actions") }}
<KTIcon icon-name="down" icon-class="fs-8 m-0" />
</button>
<div
class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fs-7 w-50px py-2"
data-kt-menu="true"
>



Hi,

Do you encounter a similar issue on our preview page?
https://preview.keenthemes.com/metronic8/vue/demo1/dashboard#/

Are you experiencing this problem with all the menu trigger buttons on the page, or is it only related to specific buttons?

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(