Skip to content

Swap Admin4 multiselect plugin - #3831

Open
yubiuser wants to merge 4 commits into
developmentfrom
admin4_multiselect
Open

Swap Admin4 multiselect plugin#3831
yubiuser wants to merge 4 commits into
developmentfrom
admin4_multiselect

Conversation

@yubiuser

@yubiuser yubiuser commented Jul 30, 2026

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

@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
@yubiuser
yubiuser force-pushed the admin4_multiselect branch from 1690730 to 71bdc8b Compare July 30, 2026 10:03
rdwebdesign
rdwebdesign requested changes Jul 30, 2026
View reviewed changes
Comment thread style/pi-hole.css Outdated
Comment thread style/pi-hole.css Outdated
@rdwebdesign

rdwebdesign commented Jul 30, 2026 •
edited
Loading

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

yubiuser commented Jul 30, 2026

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

@yubiuser
yubiuser requested review from Copilot and rdwebdesign July 30, 2026 20:29
Copilot AI reviewed Jul 30, 2026
View reviewed changes

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

rdwebdesign commented Jul 31, 2026

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.

Base automatically changed from new/adminLTE4 to development August 5, 2026 19:43
@github-actions

github-actions Bot commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

This pull request has conflicts, please resolve those before we can evaluate the pull request.

yubiuser and others added 3 commits August 6, 2026 08:00
@yubiuser
Switch from tom-select to bootstrap-multiselect
f413ac5 
Signed-off-by: yubiuser <github@yubiuser.dev>
@yubiuser
Change code to use bootstrap-multiselect
d9815a6 
Signed-off-by: yubiuser <github@yubiuser.dev>
@yubiuser @rdwebdesign
Fix CSS
30fd3b8 
Co-authored-by: RD WebDesign <github@rdwebdesign.com.br>
Signed-off-by: yubiuser <github@yubiuser.dev>
@yubiuser
yubiuser force-pushed the admin4_multiselect branch from 177998e to f134d57 Compare August 6, 2026 06:00
@github-actions

github-actions Bot commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

Conflicts have been resolved.

@yubiuser
Remove TOM select traces
0726604 
Signed-off-by: yubiuser <github@yubiuser.dev>
@yubiuser
yubiuser force-pushed the admin4_multiselect branch from f134d57 to 0726604 Compare August 6, 2026 06:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot
Copilot review effort
Applies to this pull request for everyone.Learn more about Copilot code review.
Copilot left review comments
@rdwebdesign rdwebdesign Awaiting requested review from rdwebdesign

Requested changes must be addressed to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@yubiuser @rdwebdesign