Skip to content

Swap Admin4 multiselect plugin - #3831

Open
yubiuser wants to merge 4 commits into
new/adminLTE4from
admin4_multiselect
Open

Swap Admin4 multiselect plugin#3831
yubiuser wants to merge 4 commits into
new/adminLTE4from
admin4_multiselect

Conversation

@yubiuser

Copy link
Copy Markdown
Member

What does this PR aim to accomplish?:

Swap the TOM Select plugin with https://github.com/davidstutz/bootstrap-multiselect which has better support for our "All"/"None"/"Apply" buttons.

Documentation at https://davidstutz.github.io/bootstrap-multiselect


By submitting this pull request, I confirm the following:

  1. I have read and understood the contributors guide, as well as this entire template. I understand which branch to base my commits and Pull Requests against.
  2. I have commented my proposed changes within the code and I have tested my changes.
  3. I am willing to help maintain this change if there are issues with it later.
  4. It is compatible with the EUPL 1.2 license
  5. I have squashed any insignificant commits. (git rebase)
  6. I have checked that another pull request for this purpose does not exist.
  7. I have considered, and confirmed that this submission will be valuable to others.
  8. I accept that this submission may not be used, and the pull request closed at the will of the maintainer.
  9. I give this submission freely, and claim no ownership to its content.

  • I have read the above and my PR is ready for review. Check this box to confirm

Signed-off-by: yubiuser <github@yubiuser.dev>
@yubiuser
yubiuser requested a review from a team as a code owner July 30, 2026 09:57
@yubiuser
yubiuser requested a review from rdwebdesign July 30, 2026 09:57
Signed-off-by: yubiuser <github@yubiuser.dev>
@yubiuser
yubiuser force-pushed the admin4_multiselect branch from 1690730 to 71bdc8b Compare July 30, 2026 10:03
Comment thread style/pi-hole.css Outdated
Comment thread style/pi-hole.css Outdated
@rdwebdesign

rdwebdesign commented Jul 30, 2026

Copy link
Copy Markdown
Member

I tested the branch and it works and looks better then the other plugin.
I suggested a few changes to improve the colors (specially on the dark themes).

I also noticed a small issue, but I didn't debug it yet and I'm not 100% sure if this is caused by the plugin or something else.

dropdown_error

Steps to reproduce:

  • open the Select element (using mouse or Tab key).
  • then use the Up or Down arrow keys
  • the top dropdown menu will open.

EDIT:
I created a better video to show the issue.

yubiuser and others added 2 commits July 30, 2026 22:09
Co-authored-by: RD WebDesign <github@rdwebdesign.com.br>
Signed-off-by: yubiuser <github@yubiuser.dev>
Signed-off-by: yubiuser <github@yubiuser.dev>
@yubiuser

Copy link
Copy Markdown
Member Author

This is an intersting bug. AI says

I’ve identified the likely root cause: once the multiselect menu is detached into body as a floating menu, arrow key events can bubble to Bootstrap’s global dropdown handler instead of staying scoped

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR replaces the Admin UI’s group multi-select implementation based on Tom Select with bootstrap-multiselect to better support the custom “All” / “None” / “Apply” actions used in the groups tables.

Changes:

  • Remove Tom Select vendor assets and dependency; add bootstrap-multiselect vendor assets and dependency.
  • Rework utils.createGroupSelect() and group table scripts to initialize and control the new multiselect.
  • Update CSS and page includes to load the new plugin and adjust the actions box styling/positioning.

Reviewed changes

Copilot reviewed 12 out of 19 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
vendor/tom-select/tom-select.complete.min.js Removes Tom Select JS bundle from vendored assets.
vendor/tom-select/tom-select.bootstrap5.min.css.map Removes Tom Select Bootstrap 5 sourcemap.
vendor/tom-select/tom-select.bootstrap5.min.css Removes Tom Select Bootstrap 5 CSS.
vendor/bootstrap-multiselect/bootstrap-multiselect.min.js Adds vendored Bootstrap Multiselect JS.
vendor/bootstrap-multiselect/bootstrap-multiselect.min.css Adds vendored Bootstrap Multiselect CSS.
style/pi-hole.css Renames actions box styles and adds positioning/visual overrides for the new dropdown.
scripts/lua/header.lp Switches conditional plugin CSS include to Bootstrap Multiselect.
scripts/js/utils.js Replaces Tom Select-based createGroupSelect() with a Bootstrap Multiselect-based implementation + wrapper.
scripts/js/groups-lists.js Updates initialization and Apply-button wiring to use the new multiselect wrapper.
scripts/js/groups-domains.js Updates initialization and Apply-button wiring to use the new multiselect wrapper.
scripts/js/groups-clients.js Updates initialization and Apply-button wiring to use the new multiselect wrapper.
queries.lp Replaces the Tom Select script include with Bootstrap Multiselect.
package.json Adds bootstrap-multiselect dependency and removes tom-select.
package-lock.json Locks bootstrap-multiselect and removes tom-select transitive entries.
groups.lp Replaces Tom Select script include with Bootstrap Multiselect.
groups-lists.lp Replaces Tom Select script include with Bootstrap Multiselect.
groups-domains.lp Replaces Tom Select script include with Bootstrap Multiselect.
groups-clients.lp Replaces Tom Select script include with Bootstrap Multiselect.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread style/pi-hole.css
Comment thread style/pi-hole.css
Comment on lines +576 to +584
.multiselect-floating-menu {
position: fixed;
inset: auto auto auto auto;
top: var(--multiselect-trigger-bottom);
left: var(--multiselect-trigger-left);
min-width: var(--multiselect-trigger-width);
max-width: calc(100vw - var(--multiselect-trigger-left) - 16px);
z-index: 1055;
}
@rdwebdesign

Copy link
Copy Markdown
Member

AI says

I’ve identified the likely root cause: once the multiselect menu is detached into body as a floating menu, arrow key events can bubble to Bootstrap’s global dropdown handler instead of staying scoped

This is not really the issue.

The original select2 (used in the current master branch) also puts the .bootstrap-select element on the body:
image

but this issue never happened before. Something else is causing the issue with the other dropdown.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants