Bug 28903 - Tab key and drop-down menu in item module
Summary: Tab key and drop-down menu in item module
Status: NEW
Alias: None
Product: Koha
Classification: Unclassified
Component: Cataloging (show other bugs)
Version: Main
Hardware: All All
: P5 - low minor
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
: 29558 (view as bug list)
Depends on:
Blocks:
 
Reported: 2021-08-26 08:01 UTC by pierre.genty
Modified: 2023-07-01 13:22 UTC (History)
5 users (show)

See Also:
GIT URL:
Change sponsored?: ---
Patch complexity: Trivial patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:


Attachments
Bug 28903: Tab key and drop-down menu in item module (1.35 KB, text/plain)
2021-08-27 10:42 UTC, Owen Leonard
Details

Note You need to log in before you can comment on or make changes to this bug.
Description pierre.genty 2021-08-26 08:01:36 UTC
Hi, 
Since 20.11 it is no longer possible to pull down a menu, select and jump to the next field with the tab key when adding an item. You have to click on the drop-down menu.
It seems to happen only when adding/editing an item. Tab key works well with borrower module for instance.
Comment 1 Owen Leonard 2021-08-26 13:11:14 UTC
If I understand correctly, this is the difference between how an HTML <select> behaves and how a Select2 dropdown (like on additem.pl) works:

HTML <select>:

1. Tab to <select>.
2. Use arrow key to highlight option.
3. Hit tab key -> Option is selected.
   * ENTER key also works.
4. Hit tab key -> Focus moves to next input.

Select2 dropdown:

1. Tab to field.
2. Hit ENTER.
3. Use arrow key to highlight option.
4. Hit ENTER -> Option is selected.
   * TAB key does NOT work to select an option.
5. Hit tab key -> Focus moves to next input.

If that's correct, it looks like the tab key difference can be changed by setting a new default in select2.js: "selectOnClose" -> true

In terms of having the same number of interactions (key presses or clicks), it would be nice if one didn't have to hit ENTER to activate a Select2 menu. I don't think that's currently configurable.
Comment 2 Marcel de Rooy 2021-08-26 13:23:07 UTC
From a keyboard user perspective may be harder to explain?
Comment 3 Owen Leonard 2021-08-26 13:26:16 UTC
I don't understand your comment Marcel. The change would be harder to explain?
Comment 4 Marcel de Rooy 2021-08-26 13:44:13 UTC
(In reply to Owen Leonard from comment #3)
> I don't understand your comment Marcel. The change would be harder to
> explain?

Yeah too short. The fact that one form has a dropdown type A and another one dropdown type B, and you should press X on form A but press Y on form B is harder to explain. For users it may just be a dropdown..
Comment 5 Jonathan Druart 2021-08-26 14:30:55 UTC
(In reply to Owen Leonard from comment #1)
> If that's correct, it looks like the tab key difference can be changed by
> setting a new default in select2.js: "selectOnClose" -> true

Pierre, does Owen's suggestion answer your need?

> In terms of having the same number of interactions (key presses or clicks),
> it would be nice if one didn't have to hit ENTER to activate a Select2 menu.
> I don't think that's currently configurable.

You can open the dropdown list hitting "space" in both situations. So if we turn selectOnClose on, we are good. Am I missing something?
Comment 6 Fridolin Somers 2021-08-27 07:42:48 UTC
Looks like it can be tested by adding in syspref IntranetUserJS :

$(document).ready(function() {
    $.fn.select2.defaults.set("selectOnClose", "true" );
});
Comment 7 pierre.genty 2021-08-27 09:08:41 UTC
Fridolin, I added this code in IntranetUserJS but it changes nothing for me (still have to click on the menu or hit Enter).
Comment 8 Owen Leonard 2021-08-27 10:42:05 UTC Comment hidden (obsolete)
Comment 9 Fridolin Somers 2021-08-27 21:52:34 UTC
(In reply to pierre.genty from comment #7)
> Fridolin, I added this code in IntranetUserJS but it changes nothing for me
> (still have to click on the menu or hit Enter).

Are you OK with test plan ?
For me it is the wanted behavior.
Comment 10 pierre.genty 2021-08-30 12:02:18 UTC
With the patch, the Tab key does now select the option. Thanks !
Comment 11 pierre.genty 2021-08-30 12:15:40 UTC
In 19.11, the arrow keys use to directly pull down the menu - it wasn't necessary to hit Enter. 
Besides, Tab key use to select the option AND move to next input. Now, it selects the option but stays in the same menu. 
Would it be possible to easily change this ?
Comment 12 Owen Leonard 2021-09-01 10:49:52 UTC
(In reply to pierre.genty from comment #11)
> In 19.11, the arrow keys use to directly pull down the menu

Confirmed. This appears to be a known bug in Select2: https://github.com/select2/select2/issues/3472.
Comment 13 Joonas Kylmälä 2021-09-19 12:01:40 UTC
Proposed fix would select the option if you just hover your mouse cursor over the option and then click outside the box after that --> will cause most definitely unintended changes and was not the previous behaviour.
Comment 14 Owen Leonard 2021-11-23 15:18:00 UTC
*** Bug 29558 has been marked as a duplicate of this bug. ***
Comment 15 Katrin Fischer 2023-07-01 13:22:10 UTC
(In reply to Owen Leonard from comment #12)
> (In reply to pierre.genty from comment #11)
> > In 19.11, the arrow keys use to directly pull down the menu
> 
> Confirmed. This appears to be a known bug in Select2:
> https://github.com/select2/select2/issues/3472.

There seems to be a JS snipped type workaround on the github bug - maybe something that could help us here?