Closes USERS-515
flag=none
This makes the "Filter by term" select box on the main courses
page searchable by typing into the box to narrow down the
choices. Similar functionality is already present in the
corresponding selections in the New Course modal.
Because this selection dropdown includes groups, it necessitated
a complete rewrite of the SearchableSelect component so that it
works a little more like CanvasSelect in handling its children.
It no longer depends on CanvasAsyncSelect.
SearchableSelect was almost completely rewritten from scratch so
I would recommend just reviewing the new module an ignoring the
diff from the old one. Hopefully it is more generally useful now
like CanvasSelect is.
In the course of writing tests for this, I discovered that all
our supported browsers implement Array.prototype.flat(), so it
is safe to use. What does NOT implement it, however is Jest 🤦
so I also implemented them as polyfills in the jest-setup.js
and now everyone can use them in the future.
Test plan:
* Have a bunch of terms
* Go to /accounts/default
* Click on "Filter by term" to bring up the selection dropdown
* It should work just like it used to to filter the courses list
* Now try typing in the box... it should filter the available
selections in the dropdown while you type
* If no terms match what you're typing, the dropdown should go
away altogether and the select box itself should get a red
highlight with red error text
* A11y should be okay
Change-Id: I3da8dd681645f83f858996fe42030ad400eada01
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/237585
Reviewed-by: Ed Schiebel <eschiebel@instructure.com>
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Product-Review: Matt Meservey
QA-Review: August Thornton <august@instructure.com>
0c21111e77