Advanced Select Multiple Issue
Hi,
All going smooth except the Multiple select component. It is having one problem.
I have around 83 languages options dropdown. and there's a possibility that a user can select all of them.
but the problem is that when i select an option from the dropdown, the dropdown closes and item gets selected. now i need to open the dropdown again to select another item. this is hectic task.
1. I need a way that i can be able to select the options while keeping the dropdown active.
2. I want is that i can be able to select all options in my dropdown at once using some checkmark or button.
Please let me know how to make it possible? because its a general user behavior. and this should be fixed or have some option.
Sincerely,
Carl
Replies (11)
Hi Carl,
We have already developed this feature and included it in our core component library, KtUI. However, integrating it into the main Metronic package for an official release will take a bit more time.
If you need this feature urgently, you can use the following workaround to manually update KtUI within your Metronic project and rebuild the assets.
Here are the steps:
1. Clone the `KtUI` Repository
First, clone the `KtUI` repository from GitHub into your project's root folder.
git clone https://github.com/keenthemes/ktui.git2. Install `KtUI` Dependencies
Navigate into the newly created `ktui` directory and run `npm install`.
cd ktui
npm install
npm run build
cd ..3. Update Metronic's Vendor Path
In your Metronic project, find the file named `webpack.vendors.js`. Inside this file, you need to change the path for the `ktui.min.js` file.
Look for this line:
src: ["node_modules/@keenthemes/ktui/dist/ktui.min.js"],And change it to point to the local `KtUI` source you just cloned:
src: ["ktui/dist/ktui.min.js"],4. Rebuild Metronic's Assets
Finally, run the build command from your Metronic project's root directory.
npm run buildAfter the build process is complete, you will have a new `dist/assets` folder containing the updated Metronic assets, which will include the "Select All" functionality.
Please try these steps and let us know if you run into any issues. We will also make sure to notify you as soon as the official Metronic update with this feature is released.
Thanks,
Hi Carl
We will consider adding a "Select all" button in the upcoming updates.
Thanks
Hi Faizal,
Much appreciated for that.
May I know some realistic timeframe to have that feature? Would love if it could be done as soon it can be.
Sincerely,
Carl
Hi,
When you guys will add the "Select all" button or something like that to achieve the possibility of selecting all fields in dropdown with a single click.
Currently lets say there is 80 entries in dropdown and user have to select all, its extremely frustrating and time taking to select each one by one.
That dropdown auto close is fixed. thanks for that.
but this needs to be done too. Please let me know how long will it take to get that done.
Thanks,
Carl
Hi Carl,
In package.json, could you please try to update
"@keenthemes/ktui": "^1.0.19",
Run "npm install", then rebuild the assets using the "npm run build" command.
Then use rebuilt assets from this folder dist/assets
Thanks
Hi Carl,
If you're using KtUI directly, please update it from the following link:
npmjs.com/package/@keenthemes/ktui
The fix has already been included in the recent update.
How to update?
what exactly need to update?
I copied the files manually from the demo to the server along with assets folder to setup the project.
and now I just checked that last update on themeforest was 12 june, so i downloaded the new zip. Now should i just need to replace the old assets folder with the new one downloaded? will that fix the issue?
because in here:
https://ktui.io/docs/select#multiple
i don't see the fix being done. is there any change in advance select code?
Hi Carl,
You're right, that’s a bug. The dropdown should stay open when using multiple select. We’ll fix that.
Also, adding a "Select All". We’ll look into adding support for it too.
Thanks for pointing it out
Hi Faizal,
Thank you for your response.
Exactly, its disturbing the user experience.
May I know how much time it would take to fix that bug? I really need to fix this to get my app live.
Sincerely,
These two features significantly improve the user experience, especially when dealing with large datasets.
If you let me know which framework or component library you’re using (e.g., React, Vue, plain HTML/JS), I can provide more tailored code examples.
Hope this helps!
Best regards,
[Drive zone online]
I'm using HTML, Tailwind css, and vanilla JS.
