Search input keyboard focus enhancements

[sporeventexplosion]

Search input keyboard focus enhancements

Pull Request Type

• Bugfix
• Feature Implementation
• Documentation
• Other

Related issue

Partially implements a feature requested in #2138

Description

Select text in search input when using Ctrl-L/Meta-L or Alt-D to focus search input.
This is the behavior of the combined address/search box of both Chrome and Firefox. I think it makes sense here because the search input in the application is essentially both an address box and a search box.

Add new Slash key shortcut to focus input without selecting text.
This does not select the text in the input, which matches the behavior of the YouTube web frontend.

Screenshots

Testing

• On KDE Plasma, open Klipper settings GUI and enable "Synchronize contents of the clipboard and the selection"
• Copy an arbitrary string to the clipboard
• Open FreeTube, enter some text into the search input
• do various combinations of pressing Slash, Ctrl-L, Alt-D, and also focusing/defocusing of search input by mouse
• Paste clipboard contents: original string copied to keyboard is unchanged

Desktop

• OS:
• OS Version:
• FreeTube version:

Additional context

[sporeventexplosion]

Sorry, you're right that my commit still exhibits the issue.

It appears that both Chrome and Firefox somehow work around this problem, allowing them to select text without triggering the KDE auto-copy. I have no idea how it's implemented. If it uses some low-level API that's not accessible to Electron I guess we're out of luck.

[sporeventexplosion]

(note: the order of the comments is garbled. the above comments were posted during the first DST "repeated hour" for Pacific Time, which seems to have triggered a bug in GitHub's code)

[absidue]

FreeTube used to have the search focus, but it was removed in #2108 solve #2019, so please don't add it back. The new keyboard shortcut could be considered, but I think it is important to keep in mind that typing the slash character may be easy on a US English keyboard layout, but for many other layouts that is not the case, so maybe a different key would be more suitable.

[sporeventexplosion]

After much mucking around, I found a workaround for this behavior in Chromium: make the focus+select asynchronous by wrapping it in a setTimeout(fn, 0). Now the problem is gone.

[sporeventexplosion]

Would it make sense to make this an option? I don't think it makes much sense to not implement a feature that's standard in browsers just because it affects what I imagine to be a rather rare desktop environment configuration.

Also I think what is being added here is different from what was removed in #2108, as far as I can tell.

[sporeventexplosion]

New auto-select behavior no longer causes #2019

[sporeventexplosion]

@absidue Is there still any desire to merge this?

[PikachuEXE]

I can't get Alt-D to work on MacOS. (I tested my keyboard on https://keyboardchecker.com
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/altKey

Oh it seems a different issue

No idea how to fix at the moment, non blocking for me

Slash & Meta-L work

Update 1:
From fgr-araujo/vue-shortkey#28 (comment)

On Macs, at least those with a non-US keyboard, using alt/option in keyboard shortcuts doesn't work, because Alt combinations are used to type non-ASCII characters.

In general, keyboard shortcuts using Alt only should be avoided on Mac, while shortcuts using Ctrl only should be avoided on Windows – since most combinations are in use there.

Just ignore Alt-anything on MacOS

[kommunarr]

Thanks for taking the initiative on this @sporeventexplosion! Works great for Ctrl+L and Alt+D. One main issue I'm seeing: pressing / anywhere in the app will now focus the search bar, which is pretty bad when you're trying to, say, type in an Invidious instance. You should either remove this shortcut or gate it behind Alt or Ctrl/Meta.

[PikachuEXE]

Agree on removing slash as short cut, I can't type / anywhere in text box (focus always moved to search bar)

[sporeventexplosion]

I agree, that should be separated from this PR.

[sporeventexplosion]

Slash shortcut has been removed

[absidue]

Looks like this code is now unused.

Suggested change

	isFocused() {
	return document.activeElement === this.$refs.input
	},

[efb4f5ff-1298-471a-8973-3d47447115dc]

LGTM!