Bug 36545 - Use select2 to improve multi-select in item search
Summary: Use select2 to improve multi-select in item search
Status: RESOLVED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Searching (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement
Assignee: Michael Skarupianski
QA Contact: Martin Renvoize (ashimema)
URL:
Keywords:
Depends on: 36563
Blocks:
  Show dependency tree / graph
 
Reported: 2024-04-08 13:33 UTC by Michaela Sieber
Modified: 2024-07-11 16:03 UTC (History)
14 users (show)

See Also:
Change sponsored?: Sponsored
Patch complexity: Small patch
Documentation contact: Caroline Cyr La Rose
Documentation submission: https://gitlab.com/koha-community/koha-manual/-/merge_requests/898
Text to go in the release notes:
This patch modifies all multi-select fields in the item search to use the jQuery select2 framework. Previously selecting multiple values in the item search fields was unintuitive as you had to hold down Ctrl while clicking the next value. In libraries with a high amount of values (e.g. a library with hundreds of different branches or itemtypes), selecting multiple values from the long list was extra difficult and time consuming. Using select2 allows for fast selection of multiple values, better display of the selected values and even allows you to start typing the specific value you are looking for in order to find it much faster than previously possible.
Version(s) released in:
24.05.00
Circulation function:

Attachments
Bug 36545: Use select2 in item search (4.39 KB, patch)
2024-04-09 14:03 UTC, Michael Skarupianski 		Details | Diff | Splinter Review
Bug 36545: Use select2 in item search (4.45 KB, patch)
2024-04-12 17:54 UTC, Owen Leonard 		Details | Diff | Splinter Review
Bug 36545: (follow-up) Style tweaks for Select2 multiple fields (4.05 KB, patch)
2024-04-12 17:54 UTC, Owen Leonard 		Details | Diff | Splinter Review
Bug 36545: Use select2 in item search (4.50 KB, patch)
2024-04-17 14:31 UTC, PTFS Europe Sandboxes 		Details | Diff | Splinter Review
Bug 36545: (follow-up) Style tweaks for Select2 multiple fields (4.10 KB, patch)
2024-04-17 14:31 UTC, PTFS Europe Sandboxes 		Details | Diff | Splinter Review
Bug 36545: (follow-up) Remove closeOnSelect option (1.05 KB, patch)
2024-04-30 10:37 UTC, Owen Leonard 		Details | Diff | Splinter Review
Bug 36545: Use select2 in item search (4.57 KB, patch)
2024-04-30 12:00 UTC, Martin Renvoize (ashimema) 		Details | Diff | Splinter Review
Bug 36545: (follow-up) Style tweaks for Select2 multiple fields (4.17 KB, patch)
2024-04-30 12:01 UTC, Martin Renvoize (ashimema) 		Details | Diff | Splinter Review
Bug 36545: (follow-up) Remove closeOnSelect option (1.11 KB, patch)
2024-04-30 12:01 UTC, Martin Renvoize (ashimema) 		Details | Diff | Splinter Review
Show Obsolete (6) View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Michaela Sieber 2024-04-08 13:33:14 UTC 
As discussed in Marseille (Hackfest 2024) we provide a patch for item seach using select2.

To test:
- Apply patch
- check item search form and search for 
   - Home library
   - Current library
   - Shelving location
   - Item type
   - Collection
   - Status
   - Lost
   - Withdrawn
   - Damaged
Search with multiple variations (nothing selected, only one value, multiple values, ...) If no value is selected this means that "All" values are searched
- Check that the search is working well
- Sign off :-)
Comment 1 Magnus Enger 2024-04-08 13:37:32 UTC 
What are the advantages of this new approach over the old one?
Comment 2 Michaela Sieber 2024-04-08 14:57:06 UTC 
(In reply to Magnus Enger from comment #1)
> What are the advantages of this new approach over the old one?

The multiselect option is more intuitive, you can start typing and only relevant values are displayed in the drop down, you have less scrolling,...

And all other advantages  of select2   :-)
Comment 3 Michael Skarupianski 2024-04-09 14:03:07 UTC Comment hidden (obsolete)
Comment 4 Michaela Sieber 2024-04-10 07:56:49 UTC 
Please note that there is a bug in master item search, see bug 36563
Comment 5 Owen Leonard 2024-04-12 17:54:11 UTC 
Created attachment 164861 [details] [review]
Bug 36545: Use select2 in item search

This patch modifies the multi-select fields in the item search to use
the select2 framework.

To test:
1. Apply patch
2. Go to staff interface -> "Item search"
3. Check item search form and search for
      - Home library
      - Current library
      - Shelving location
      - Item type
      - Collection
      - Status
      - Lost
      - Withdrawn
      - Damaged
4. Search with multiple variations (nothing selected, only one value,
   multiple values, ...) If no value is selected this means that "All"
   values are searched
5. Check that the search is working well

Sponsored-by: Karlsruhe Institute of Technology (KIT)
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Comment 6 Owen Leonard 2024-04-12 17:54:13 UTC 
Created attachment 164862 [details] [review]
Bug 36545: (follow-up) Style tweaks for Select2 multiple fields

This patch does some fine-tuning of Select2 style on fields which accept
multiple selections. The patch also changes the way the form rows are
displayed on this page. I thought that the Select2 fields should be
wider to accpet multiple selections without the container wrapping onto
another line.

The patch also sets the Select2 "closeOnSelect" option to false on this
page because I think that makes more sense in a situation where multiple
selections might be made.

To test, apply the patch and clear your browser cache.

- Go to item search in the staff client
- Confirm that the form looks good and adjusts well to various browser
  widths.
- Make some selections to confirm that the style of selections looks
  good and that the dropdown stays open as you make multiple selections.
Comment 7 PTFS Europe Sandboxes 2024-04-17 14:31:26 UTC 
Created attachment 165018 [details] [review]
Bug 36545: Use select2 in item search

This patch modifies the multi-select fields in the item search to use
the select2 framework.

To test:
1. Apply patch
2. Go to staff interface -> "Item search"
3. Check item search form and search for
      - Home library
      - Current library
      - Shelving location
      - Item type
      - Collection
      - Status
      - Lost
      - Withdrawn
      - Damaged
4. Search with multiple variations (nothing selected, only one value,
   multiple values, ...) If no value is selected this means that "All"
   values are searched
5. Check that the search is working well

Sponsored-by: Karlsruhe Institute of Technology (KIT)
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu>
Comment 8 PTFS Europe Sandboxes 2024-04-17 14:31:28 UTC 
Created attachment 165019 [details] [review]
Bug 36545: (follow-up) Style tweaks for Select2 multiple fields

This patch does some fine-tuning of Select2 style on fields which accept
multiple selections. The patch also changes the way the form rows are
displayed on this page. I thought that the Select2 fields should be
wider to accpet multiple selections without the container wrapping onto
another line.

The patch also sets the Select2 "closeOnSelect" option to false on this
page because I think that makes more sense in a situation where multiple
selections might be made.

To test, apply the patch and clear your browser cache.

- Go to item search in the staff client
- Confirm that the form looks good and adjusts well to various browser
  widths.
- Make some selections to confirm that the style of selections looks
  good and that the dropdown stays open as you make multiple selections.

Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu>
Comment 9 Michaela Sieber 2024-04-17 14:42:25 UTC 
Hi Owen,

thanks for you style tweaks :-)

I like them but I am not sure if everybody is happy with the 
 closeOnSelect: false

This means that the dropdown will stay open until the user click somewhere outside the menu.

For libraries with only one or few branches this behavior could feel annoying.

I would love to read some feedback from libraries around the world :-)
Comment 10 Caroline Cyr La Rose 2024-04-17 15:32:05 UTC 
(In reply to Michaela Sieber from comment #9)

> This means that the dropdown will stay open until the user click somewhere
> outside the menu.
> 
> For libraries with only one or few branches this behavior could feel
> annoying.
> 
> I would love to read some feedback from libraries around the world :-)

I didn't try it without Owen's patch (I applied the whole thing), but I like how the dropdown behaves. 

I understand your point, but I think it would be *more* annoying for libraries with many branches if they have to open the dropdown each time to select another branch (it would be twice as many clicks?).

What I'm most concerned about is the shift from "All ..." to "empty". I don't want staff to think they have to select all the options to get the equivalent of "All ...". But I guess that's just a thing we'll have to teach and highlight on upgrade, and in the manual.
Comment 11 Aude Charillon 2024-04-25 12:51:57 UTC 
This is great! It looks so much better - and I really appreciate that it takes less space on the page.

Note: like Caroline, I applied the whole thing, with Owen's changes.

Wading into the "closeOnSelect" debate... I'm afraid I do not find it intuitive to have to "click out" after making my selection.

I would even say that leaving the dropdown open is actually annoying if you want to make a selection for the field just below. For example, I made a selection for Item type and I now want to select some Collections. Because Collection is below Item type, the still open Item type dropdown hides the Collection selection area. So I have to click out before I can get to Collection. If I have to do that for every line it becomes a bit frustrating.

I also tried making my selection by starting to type in the word - e.g., "re" to get to Reference more quickly. I was surprised that after I clicked on Reference, "re" was still appearing next to it in the selection box (until I clicked out). Is this normal? It looked a bit weird to me so thought I'd mention it :D
Comment 12 Michaela Sieber 2024-04-29 15:37:37 UTC 
(In reply to Aude Charillon from comment #11)
> I would even say that leaving the dropdown open is actually annoying if you
> want to make a selection for the field just below. For example, I made a
> selection for Item type and I now want to select some Collections. Because
> Collection is below Item type, the still open Item type dropdown hides the
> Collection selection area. So I have to click out before I can get to
> Collection. If I have to do that for every line it becomes a bit frustrating.



I agree and although we are a library with nearly 200 branches we prefer that the dropdowns close after selection, this is also the behavior we have today in our local patch.


@Owen: Could you please remove the "closeOnSelect"   


I think then it is time for QA :-)
Comment 13 Owen Leonard 2024-04-30 10:37:40 UTC 
Created attachment 165838 [details] [review]
Bug 36545: (follow-up) Remove closeOnSelect option
Comment 14 Katrin Fischer 2024-04-30 11:24:48 UTC 
I think this would make a nice addition still for 24.05 as we had a lot of positive feedback on it at hackfest and I don't expect side effects.
Comment 15 Martin Renvoize (ashimema) 2024-04-30 12:00:59 UTC 
Created attachment 165866 [details] [review]
Bug 36545: Use select2 in item search

This patch modifies the multi-select fields in the item search to use
the select2 framework.

To test:
1. Apply patch
2. Go to staff interface -> "Item search"
3. Check item search form and search for
      - Home library
      - Current library
      - Shelving location
      - Item type
      - Collection
      - Status
      - Lost
      - Withdrawn
      - Damaged
4. Search with multiple variations (nothing selected, only one value,
   multiple values, ...) If no value is selected this means that "All"
   values are searched
5. Check that the search is working well

Sponsored-by: Karlsruhe Institute of Technology (KIT)
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 16 Martin Renvoize (ashimema) 2024-04-30 12:01:03 UTC 
Created attachment 165867 [details] [review]
Bug 36545: (follow-up) Style tweaks for Select2 multiple fields

This patch does some fine-tuning of Select2 style on fields which accept
multiple selections. The patch also changes the way the form rows are
displayed on this page. I thought that the Select2 fields should be
wider to accpet multiple selections without the container wrapping onto
another line.

The patch also sets the Select2 "closeOnSelect" option to false on this
page because I think that makes more sense in a situation where multiple
selections might be made.

To test, apply the patch and clear your browser cache.

- Go to item search in the staff client
- Confirm that the form looks good and adjusts well to various browser
  widths.
- Make some selections to confirm that the style of selections looks
  good and that the dropdown stays open as you make multiple selections.

Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 17 Martin Renvoize (ashimema) 2024-04-30 12:01:06 UTC 
Created attachment 165868 [details] [review]
Bug 36545: (follow-up) Remove closeOnSelect option

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 18 Martin Renvoize (ashimema) 2024-04-30 12:01:32 UTC 
Nice enhancement, all working well and looking good.

Passing QA
Comment 19 Katrin Fischer 2024-04-30 15:11:03 UTC 
Pushed for 24.05!

Well done everyone, thank you!
Comment 20 Fridolin Somers 2024-05-24 12:32:29 UTC 
Not backported to 23.11.x