New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs

KT component ISSUES


I’ve updated Metronic to version 9.3.0 and KTUI to version 1.0.23.

There are still the following issues:

1. KTSelect Component

  • When using Remote KTSelect, the selected value is not returned — selectEl.value always returns an empty string ("").
  • KTSelect still does not display correctly inside a modal.
    Reference: https://devs.keenthemes.com/question/ktselect-issue
  • The KTSelect component does not have getInstance() or getOrCreateInstance() methods like other components.


2. KTDataTable Component



3. KTImage Component


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


Update after upgrading to ktui 1.0.27



Hi,

  • The Select2 inside a modal with search now works. However, when I set dropdownStrategy to fixed the dropdown appears bottom-right of the screen; switching to absolute makes it behave as expected. I’m not sure if this change is intended.
    dropdownContainer: "body", dropdownStrategy: "fixed"
  • The placeholder issue still persists: if I don’t add an empty option manually, the first option becomes preselected even though the select visually shows the placeholder configurated on the ktselect.
  • In KTDatatable (remote) column sorting does not work. The request query string contains sortOrder=asc&amp;sortField=true instead of sending the actual field name.
    sortOrder=asc&sortField=true
  • If I want to use a multiple select, I need to set both multiple="true" and data-kt-select-multiple="true". It doesn’t make much sense, does it?


Thanks

Hi

The problem was in config.ts at the setSelectedOptions() method. When clearSelection() called setSelectedOptions([]), the code would execute:

When value = [], this became: [undefined]

We will include the fix in the upcoming updates.

https://github.com/keenthemes/ktui/pull/54

Thanks



Hi,
I also want to report the following issues:

  • refresh() and update() methods do not update the values retrieved from a remote select.
  • When clicking on the search of a select inside a modal, the dropdown closes unexpectedly (using the following configuration):
    dropdownContainer: "body", dropdownStrategy: "fixed",
  • If I don’t manually add a placeholder option, the first value gets automatically preselected, even though the select visually shows the placeholder text.


Hi,
I noticed that in the latest update of ktui 1.0.25 there's an issue with the clearSelection() method.

It doesn’t completely clear _selectedOptions, since setSelectedOptions adds an undefined element. As a result, clearSelection() doesn’t display the placeholder correctly.


Hi

The issue is that the double dots are being generated by Tailwind CSS itself when it processes complex class names. This is not something we can fix in the source SCSS files because Metronic v9 uses Tailwind CSS utility classes.

The warning will appear only in Angular. You can safely ignore the warnings for now, until we find a workaround.

Thanks



Hi, I believe you have replied to the wrong ticket.



Hi

We will include the missing methods and fixes for the remaining issues. Thanks for your patience and detailed feedback.

Thanks



Hi,

There are any updates on the remaining issues?



Hi,

I have seen that the issues with the InputImage component and the KTSelect Remote have been resolved, ty for that.

Regarding the positioning issue, I have identified where the problem occurs. When the modal opens, I manually update the options in the original select. This seems to cause some conflicts with the dropdown.

It would be very useful if the KTSelect component had a method to update the options and/or reload the remote select, similar to how it works for the datatable.



For "KTSelect still does not display correctly inside a modal."

Please try the example here:

examples/select/modal.html
https://github.com/keenthemes/ktui/blob/main/examples/select/modal.html

Thanks



In this example, a KTModal is not used. From the tests Ive performed, if the kt-modal-center class is used, the dropdown does not stay inside the modal, instead, it appears in the bottomright corner.



Hi

Thank you for your feedback. We will release the fixes before the next Metronic updates. We will then include it in the Metronic updates.

Thanks



When creating a new FormData(formEl), the remote KTSelect fields are not included, whereas the non-remote fields are correctly included.


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