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

KT menu not opening on rerender


Hi,
I am using react metronic theme


<button
type="button"
className="btn btn-sm btn-icon btn-color-primary"
data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-end"
data-kt-menu-flip="top-end"
>
<KTSVG
path="/media/icons/duotune/general/gen024.svg"
className="svg-icon-2"
/>
</button>
<div
className="menu menu-sub menu-sub-dropdown w-250px w-md-300px"
data-kt-menu="true"
>........</div>


this code is working on first render but it is not wokring when page rerender, menu is not opening.

how to tigger element again


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 (5)


Hi,

Thank you for reaching out to us.

Our components are initialized on the first-page load using pluginsInitialization() function in file src/_metronic/layout/MasterInit.tsx. Elements rendered asynchronously or after global initialization will not work. To fix this inside your component you can manually call MenuComponent.reinitialization().

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Thanks

Do you have any docs for your components ?



Hi,

Unfortunately, at the moment, we do not have separate docs for typescript components. Our react ts components are typescript versions of our js components in the main HTML version and they work the same way.

You can refer to menu component docs in our HTML version.
https://preview.keenthemes.com/html/metronic/docs/general/menu/api

If this prevents you from using Metronic React further you can request a refund using this form. 100% money back is guaranteed.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Mine works on re-render but not work on first rendering time so I must make some changes happened in the component first before can trigger the menu to show


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  :(