Follow-up: Selecting multiple images from library allows too many items

[indigoxela]

Description of the bug

In #7118 it has been discovered that when selecting images from the image library (browser), the limit for selection via ui.selectable is always the full field cardinality. Totally disregarding existing images, that have been previously inserted.

That means, we let people chose files that have to get dropped on node save. Not very intuitive, bad UX.

Steps To Reproduce

On a node type with a multi-value image field (cardinality > 1 but < unlimited).

1. Open a node form
2. Add some images, less than allowed
3. Open the dialog again and select as many as jquery.ui will let you (cardinality)

Actual behavior

For a field that allows 3 items, you can add 5 in two runs. 2 the first time, 3 (cardinality) the second time.

Until #7119 is fixed, you'll get a TypeError on node save, but even if that wasn't the case - why letting people choose more than are allowed in the first place?

Expected behavior

I can select the remaining count of images, not more.

Additional information

• Backdrop CMS version: latest dev, since [UX] Support "multiple" HTML5 attribute on File elements #440

Note: this is about picking from library (dialog), not uploading.

[indigoxela]

Still keeping it as "needs work" because it was a quick shot (again). And the UX of ui.selectable ... doesn't really convince me. Let alone A11Y concerns...

But feedback is already welcome!

[indigoxela]

Some regression that needs attention in contrib, but might also require some consideration in core, how/when the ui.selectable lib is attached: backdrop-contrib/file_library#7

Apparently it can happen, that core/modules/file/js/file.js is loaded, but the callback file_managed_file_browser_open() is not involved.

But as code looks now, file.js has a dependency on ui.selectable, otherwise there's Uncaught TypeError: $browserContainer.selectable is not a function

Three solutions come to my mind:

1. Do not use ui.selectable at all
2. Attach ui.selectable in a different callback, possibly always
3. Workaround in file.js to only require use ui.selectable, if it's actually available (loaded)

Note that at the moment I have no way to reproduce the error in core alone. Worst case, I'd have to load the library in my module, just to prevent the error, although I'm not using it. 😬

Edit: for now I went with option 4 - attach the lib in my own (alternative) callback. 😉

[indigoxela]

We also have to take care of "unselected", as otherwise files get added, that aren't actually selected anymore, if the last action was unselecting.

[indigoxela]

I think, it's good enough now for some testing and a first review. At least, it fixes the immediate problem. 😉

[docwilmot]

I hadn't been looking at the follow up issues for the multiple files project, it's great to see that we're making some progress cleaning things up. I believe the decision to use UI selectable was mine at some point before I again abandoned the multiple files PR. Apologies for making things difficult for somebody else in the end. 🫤

[indigoxela]

Apologies for making things difficult for somebody else in the end

The feature was a long running relay race. 😉 I wasn't aware that using ui.selectable would cause trouble, either. All solvable, though.

But, hey, as we're talking about progress - you're actually a perfect candidate for testing (and review), as you're quite familiar with the feature. 🥺