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;