[24.0] Fix bugs relating to history keyboard navigation

[ahmedhamidawan]

Adds cross platform Ctrl/Cmd(Metakey) compatibility for features added in #17502

Also adds a minor Shift+Click select feature (on top of the existing Shift+Arrowkey feature):

shift_click_select.mp4

Here, the user first selects individual items using Ctrl+Click, and selects batches of items using Shift+Ctrl+Click, to be able to select batch items while maintaining prior selections.
Then, they select items using only Shift+Click, which restricts the selection to the initial item and the range.

How to test the changes?

(Select all options that apply)

• I've included appropriate automated tests.
• This is a refactoring of components with existing test coverage.
• Instructions for manual testing are as follows:
  1. Select an initial item using Ctrl/Shift + Click
  2. Then Shift+Click another item above or below the initial one to select the ones in the range
  3. Also, try out Shift+Ctrl+Click to select items in multiple batches

License

• I agree to license these and all my past contributions to the core galaxy codebase under the MIT license.

[martenson]

It works well, thanks @ahmedhamidawan

As a fairly needed followup to this feature I think we should take care to enable click-to-select on a larger area of the history items when tags are present. See below what portion of the item is clickable, the rest is not and it feels weird.

[ahmedhamidawan]

Yes, very good point, doing this as part of the same PR

[dannon]

Haven't done any tinkering to actually try it, but it might be worth looking into https://vueuse.org/core/useMagicKeys/#usemagickeys w/ https://vueuse.org/core/useKeyModifier/#usekeymodifier to simplify this in a standard non-platform-specific way. And we already use vueuse.

[ElectronicBlueberry]

Why was this removed?

[ahmedhamidawan]

The ContentOptions buttons are always Keyboard selectable now, with the Tab key. To go from one item to another, you can use the arrow keys, the tab key will take you from ContentItem -> ContentOptions -> ContentItem ....

[martenson]

@dannon Likely a decent standard for the key detection. However the logic here goes beyond different keyboards, because the standard macos behavior for selecting is command+click despite having the ctrl key. I did not see that being handled in the lib you linked. Did I miss it?

[dannon]

Good point -- might not be worth caring about OS, and just have a simpler modifierPressed be the cross-os union of ctrl/cmd/meta/whatever?

Is there a situation where that would actually be problematic? Would it just be something like I guess on a windows machine you get win+c copying as well, which is fine?

[ahmedhamidawan]

Good point -- might not be worth caring about OS, and just have a simpler modifierPressed be the union of ctrl/cmd/meta/whatever?

Is there a situation where that would actually be problematic? Would it just be something like I guess on a windows machine you get win+c copying as well, which is fine?

Only thing is, you wouldn't want to prevent default behavior for the Windows key

For Mac, it'd probably work out fine for Control+Click or Cmd-Click doing the same thing. It would feel weird if on Windows, Ctrl-Click and Windows-Click were the same though

[dannon]

Sure -- does windows+click have a predefined behavior? Ctrl+click opens in a new tab, so we're already kind of overwriting that I guess.

[ahmedhamidawan]

Sure -- does windows+click have a predefined behavior? Ctrl+click opens in a new tab, so we're already kind of overwriting that I guess.

This would only be the behavior when you ctrl click on the area which typically expands the dataset/ opens the collection, but I see your point. Maybe then that's what I'll do here, treat the Meta and Ctrl/Control key the same way (for ContentItems)

[martenson]

ctrl+click on macos is simulating the right click 🫣

[ahmedhamidawan]

So maybe then

function isSelectKey(event: KeyboardEvent) {
    const isMac = navigator.userAgent.indexOf("Mac") >= 0;
    return isMac ? event.metaKey : event.ctrlKey;
}

is an alright way of using the appropriate key for this? Since, for the purposes here, Ctrl-Click or Ctrl-A for Windows, and Cmd-Click or Cmd-A for Mac are default behaviors that users are used to across apps?

[dannon]

@ahmedhamidawan Yeah, I think that's fine. I didn't realize control+click on mac was also a right click; we shouldn't mask that.

[martenson]

thanks @ahmedhamidawan!
I extracted the followup to #17620