Fixed #24179 -- FilteredSelectMultiple widget - add filter field to the right column.

[gav-fyi]

Add functionality to the SelectFilter widget to allow searching on the "Selected" side.

The fix is purely for displaying the results, and the value passed to the server/saved to the DB are not affected by what is visible due to search terms. This is to keep it in-line with the "Available" side of the widget.

Implements Ticket #24179 - FilteredSelectMultiple widget - add filter field to the right column.

[gav-fyi]

Hi @carltongibson

I've added some new commits.

I think an addition to the admin section of 4.2.txt would be appropriate.

Added

Would you be up for adding some tests for the existing behaviour (add a couple of options, assert they're filtered, and can be moved, ...) in a commit before the changes here

Added some tests. Not had much experience ~~using~~ fighting QUnit, so ended up using some API functions rather than testing pure user actions. Let me know if they need updating?

then adding a can be filtered once selected check would be quite minimal.

Added. Again, I wasn't entirely happy with calling the handlers directly.

[felixxm]

@Scalamoosh Thanks for this patch :+1: IMO, we still have a big unanswered question about submitting chosen vs. selected and chosen values. We didn't reach a consensus on the ticket (see comment#3, comment#4, and comment#6), maybe a discussion on the mailing list is needed :thinking: Submitting filtered out values can be really confusing for users :exploding_head: (it is for me). We could force users to clear right-side filters before submission :thinking:

[carltongibson]

@Scalamoosh Can you have a think about what might be relatively simple to add here...?

Maybe something like X selected options not visible, plus a clear button...

Or... showing non-matches below but greyed-out...

Or... 😅

The point being, if we can find a straightforward approach that's sufficient then we can make progress here.

[carltongibson]

@Scalamoosh assuming it would be simple enough, do you want to give the "Adding a X selected items not shown" message, and we can see what that looks like? Thanks!

[gav-fyi]

@Scalamoosh assuming it would be simple enough, do you want to give the "Adding a X selected items not shown" message, and we can see what that looks like? Thanks!

@carltongibson - Something like this? (Cross posted to the mailing list too)

[carltongibson]

Hi @Scalamoosh — hat looks good yeah — It's nicely obvious 🙂

The thing that jumps out is, could we add a (muted-text) click to clear on the warning banner there? (I would say a link, but why not the why element for a bigger click target. 🤔)

[gav-fyi]

Hi @carltongibson - Couldn't find a generic muted class that works.

There is .quiet which makes it hardly noticeable on dark mode, and ugly on light. Similar with .help, albeit a smaller font-size.

I have hooked in to the --breadcrumbs-fg var, as that has the same background colour. Let me know if you want a specific variable created rather than reusing an unrelated variable?

.quiet

.help

var(--breadcrumbs-fg)

[carltongibson]

OK, great. Push your best option, and I'll take a look. Thanks!

[carltongibson]

Hey @Scalamoosh — I think that looks pretty good. I'll ask Mariusz to take a look over the next few days and see if he's in agreement.

Assuming so... 🤞

Meanwhile are you able to rebase and squash down to a single commit? (Then a final nick-pic, and we should be there.)

Thanks for the effort! 🎁

[gav-fyi]

Apologies @carltongibson - A messed up git rebase has closed the PR. Can it be re-opened, or does it need a fresh one creating? The branch is still there, with a single commit now. https://github.com/django/django/compare/main...Scalamoosh:django:fix-24179

[carltongibson]

Open a fresh one. No problem (these things happen)