Replace Chosen.js with TomSelect for member lookup#2562
Merged
mroderick merged 3 commits intocodebar:masterfrom Apr 11, 2026
Merged
Replace Chosen.js with TomSelect for member lookup#2562mroderick merged 3 commits intocodebar:masterfrom
mroderick merged 3 commits intocodebar:masterfrom
Conversation
mroderick
force-pushed
the
feature/tom-select-member-search
branch
from
45154c0 to
9332651
Compare
Collaborator
Author
|
Replacing with clean PR that only contains implementation commits. |
- Add search action to Admin::MembersController - Search by name or email with ILIKE query - Return JSON with id, name, surname, email, full_name - Limit results to 50 - Require minimum 3 characters for search - Remove @members = Member.all from index (loaded dynamically)
- Add TomSelect to admin members index page (loaded from CDN) - Search triggers after 3+ characters with 300ms debounce - Display member name and email in dropdown options - Update 'View Profile' link on member selection - Initialize TomSelect before Chosen to avoid conflicts - Exclude member_lookup_id from Chosen initialization
mroderick
force-pushed
the
feature/tom-select-member-search
branch
from
9332651 to
ea3e71f
Compare
mroderick
added a commit
to mroderick/codebar-planner
that referenced
this pull request
Apr 11, 2026
- Replace Chosen.js dropdown with TomSelect for member lookup - Load members dynamically via /admin/members/search endpoint - Add select_from_tom_select helper for Capybara tests - Update tests for remote data loading - Exclude #meeting_invitations_member from Chosen.js initialization Reuses /admin/members/search endpoint from PR codebar#2562. Fixes performance issue loading 28k+ members on every page render.
mroderick
added a commit
to mroderick/codebar-planner
that referenced
this pull request
Apr 11, 2026
- Add organisers field to TomSelect initialization with remove_button plugin - Pre-populate existing organisers on edit form using options_for_select - Add remove_from_tom_select test helper for multi-select interaction - Update tests for TomSelect interaction (add/remove organisers) - Exclude meeting_organisers from Chosen.js initialization Reuses /admin/members/search endpoint from PR codebar#2562. Fixes performance issue loading 28k+ members on every page load.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
The member lookup on
/admin/memberscurrently loads all members into a dropdown using Chosen.js. This approach has two problems:Chosen.js is unmaintained - The repository has been archived and hasn't received updates since 2017. It has known issues with modern browsers and accessibility.
Scaling problem - The database has ~28,000 members. Loading all of them into a dropdown on every page load is slow and will only get worse as membership grows.
What
Replace Chosen.js with TomSelect for the member lookup field, using remote data loading:
/admin/members/searchJSON endpointChanges
Backend:
GET /admin/members/searchJSON endpointid,name,surname,email,full_nameFrontend:
/admin/members#member_lookup_idHow to Verify Locally
1. Make yourself an admin
Open a Rails console:
bundle exec rails consoleFind your member record and add the admin role:
2. Start the server
bundle exec rails server3. Test the member search
http://localhost:3000/admin/members4. Run the tests
bundle exec rspec spec/controllers/admin/members_controller_spec.rb spec/features/admin/tom_select_member_lookup_spec.rbAll 8 tests should pass.
Suggested Searches (from local dev database)
Try these searches to verify the functionality:
SalSalvadorblickEmmEmmieKennGong@Note: Search requires 3+ characters to trigger. Results show both name and email in the dropdown.
Commits
Each commit is independently green (all tests pass):
feat: add search route for admin members- Adds the routefeat(admin): add member search endpoint- Controller tests + implementationfeat: integrate TomSelect for member lookup- Frontend + feature tests