Replace Chosen with native datalist for sponsor chapter filter - #2820
Conversation
9212787 to
ddafafe
Compare
Adds case-insensitive name-based chapter lookup as a fallback when filtering sponsors. Supports both chapter IDs (for programmatic use) and chapter names (for human-friendly filtering).
Reusable ViewComponent for single-chapter selection using native HTML datalist. Renders a text input with autocomplete=off backed by a datalist of chapter names. Sanitises the input name into a valid HTML id for the datalist element.
Replaces the chosen-select collection_select with the reusable ChapterPickerComponent. Also switches from simple_form_for to form_with for the filter form.
Replaces f.association :chapter select with ChapterPickerComponent. Adds resolve_chapter_name_to_id helper to the controller so the form can submit chapter names while the model still receives IDs.
ddafafe to
3788be9
Compare
| @@ -0,0 +1,15 @@ | |||
| # frozen_string_literal: true | |||
|
|
|||
| class ChapterPickerComponent < ViewComponent::Base | |||
There was a problem hiding this comment.
Minor: We should have an ApplicationComponent base class, I think, for an easier control point. It won't change anything right now, but it's neat to have prepared.
There was a problem hiding this comment.
I'm new to using ViewComponents, so this might be a silly question. What would this ApplicationComponent give us?
There was a problem hiding this comment.
Just like ApplicationController or ApplicationRecord, a single base class, where you can do shared things like "ah, always use this custom layout", to take an example from ApplicationController.
There was a problem hiding this comment.
But, let's install that thing whenever we need to.
| require 'view_component/test_helpers' | ||
|
|
||
| RSpec.describe ChapterPickerComponent do | ||
| include ViewComponent::TestHelpers |
There was a problem hiding this comment.
Minor: we should make it so that each spec/components/ test get these by dint of having derived RSpec Metadata about their "type".
Or, check whether that's already true, and these helpers are already included.
olleolleolle
left a comment
olleolleolle
left a comment
There was a problem hiding this comment.
I like a good datalist.
2 participants
What
Replaces Chosen.js selects with a reusable
ChapterPickerComponentthat uses native HTMLdatalist+ text input withautocomplete="off".New: ChapterPickerComponent
A reusable ViewComponent that renders a text input backed by a
<datalist>with chapter names as values:The input shows the chapter name the user selects (not an ID), while the controller does a case-insensitive name lookup to resolve it. The
autocomplete="off"prevents browser autofill from fighting the datalist suggestions.Applied to
admin/sponsors/index) — replacescollection_selectwithchosen-selectclassadmin/workshops/_shared_form) — replacesf.association :chapterselectSponsorsSearch
Continues to do case-insensitive name lookup for chapter filtering (no change from the existing behaviour — the datalist now submits the name directly instead of an ID).
Why
Chosen is abandoned. This removes a JavaScript dependency and uses built-in browser autocomplete instead. The component is reusable — any form that needs single-chapter selection can use it.
Testing
bundle exec rspec spec/queries/sponsors_search_spec.rbbundle exec rspec spec/features/admin/filtering_sponsors_list_spec.rbbundle exec rspec spec/features/admin/workshops_spec.rbbundle exec rspec spec/components/chapter_picker_component_spec.rb