From dc1be2791f0fd0834cdf00c5f6a721dfef79b932 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Tue, 9 Mar 2021 10:26:09 +0800
Subject: [PATCH] Wunderbar: Use typical Home/End behavior instead of
 ReachUI's.

## Issue
- Closes "Wunder: Keyboard typing confusion" (https://discord.com/channels/362322208485277697/377895389992321064/784309720293965824)
- Closes 5316: "Home and End keys not working in search box"

## New behavior
Home/End key now behaves like it normally would in a typical text box, i.e.:
- Brings you to the start or end position.
- Adding a <Shift> key also selects the text from the current position.

To select the top or bottom item in the Suggestion Popup List, use Ctrl+Home/End instead (without this change, it was just Home/End previously).

## Approach
Adding the listener at the element level allows us to run it before the component's listener.
---
 CHANGELOG.md                               |  1 +
 ui/component/wunderbarSuggestions/view.jsx | 50 ++++++++++++++++++++++
 2 files changed, 51 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0124c4305..f8de5de0b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Player doesn't stop playing when editing a comment that includes a video url _community pr!_ ([#5384](https://github.com/lbryio/lbry-desktop/pull/5384))
 - Main video/audio playback stopped every time a comment is edited or deleted ([#5606](https://github.com/lbryio/lbry-desktop/pull/5606))
 - Winning search result not working correctly with mature content enabled _community pr!_ ([#5388](https://github.com/lbryio/lbry-desktop/pull/5388))
+- Home/End key not working as expected in Search Bar ([#5642](https://github.com/lbryio/lbry-desktop/pull/5642))
 - Fixes to inline videos in comments _community pr!_ ([#5389](https://github.com/lbryio/lbry-desktop/pull/5389))
 - Search page crashing on some results ([#5428](https://github.com/lbryio/lbry-desktop/pull/5428))
 - Long channel names caused comments to extend underneath related content _community pr!_ ([#5431](https://github.com/lbryio/lbry-desktop/pull/5431))
diff --git a/ui/component/wunderbarSuggestions/view.jsx b/ui/component/wunderbarSuggestions/view.jsx
index f89d1e2d0..1255500d9 100644
--- a/ui/component/wunderbarSuggestions/view.jsx
+++ b/ui/component/wunderbarSuggestions/view.jsx
@@ -127,6 +127,56 @@ export default function WunderBarSuggestions(props: Props) {
     }
   }
 
+  React.useEffect(() => {
+    function handleHomeEndCaretPos(elem, shiftKey, isHome) {
+      if (elem) {
+        const cur = elem.selectionStart ? elem.selectionStart : 0;
+        let begin;
+        let final;
+        let scrollPx;
+
+        if (isHome) {
+          begin = 0;
+          final = shiftKey ? cur : begin;
+          scrollPx = 0;
+        } else {
+          final = elem.value.length;
+          begin = shiftKey ? cur : final;
+          scrollPx = elem.scrollWidth - elem.clientWidth;
+        }
+
+        elem.setSelectionRange(begin, final);
+        elem.scrollLeft = scrollPx;
+        return true;
+      }
+
+      return false;
+    }
+
+    function overrideHomeEndHandling(event) {
+      const { ctrlKey, metaKey, shiftKey, key } = event;
+      if (!ctrlKey && !metaKey) {
+        if (key === 'Home' || key === 'End') {
+          if (handleHomeEndCaretPos(inputRef.current, shiftKey, key === 'Home')) {
+            event.stopPropagation();
+          }
+        }
+      }
+    }
+
+    // Injecting the listener at the element level puts it before
+    // ReachUI::ComboBoxInput's listener, allowing us to skip their handling.
+    if (inputRef.current) {
+      inputRef.current.addEventListener('keydown', overrideHomeEndHandling);
+    }
+
+    return () => {
+      if (inputRef.current) {
+        inputRef.current.removeEventListener('keydown', overrideHomeEndHandling);
+      }
+    };
+  }, [inputRef]);
+
   React.useEffect(() => {
     function handleKeyDown(event) {
       const { ctrlKey, metaKey, keyCode } = event;