LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Wunderbar: fix popup dismissed despite a child is in focus

Browse source 
## Issue
1. Type something in the wunderbar.
2. While the spinner is running, press Tab to focus on "View results" button.
3. If the spinner is still running, the entire popup gets dismissed (it should not). If the spinner isn't running, the popup stays active.

## Change
It was explicitly dismissed when the <input> loses focus. It shouldn't do that if any child of the popup is in focus.
This commit is contained in:
infinite-persistence 2021-09-14 15:06:52 +08:00
parent 939d26801a
commit 9d1ff4e8ae
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
1 changed files with 7 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
ui/component/wunderbarSuggestions/view.jsx
View file

@ -64,7 +64,11 @@ export default function WunderBarSuggestions(props: Props) {
customSelectAction,
} = props;
const inputRef: ElementRef<any> = React.useRef();
const isFocused = inputRef && inputRef.current && inputRef.current === document.activeElement;
const viewResultsRef: ElementRef<any> = React.useRef();
const exploreTagRef: ElementRef<any> = React.useRef();
const isRefFocused = (ref) => ref && ref.current && ref.current === document.activeElement;
const isFocused = isRefFocused(inputRef) || isRefFocused(viewResultsRef) || isRefFocused(exploreTagRef);
const {
push,
@ -324,10 +328,10 @@ export default function WunderBarSuggestions(props: Props) {
{!noBottomLinks && (
<div className="wunderbar__bottom-links">
<ComboboxOption value={term} className="wunderbar__more-results">
<Button button="link" label={__('View All Results')} />
<Button ref={viewResultsRef} button="link" label={__('View All Results')} />
</ComboboxOption>
<ComboboxOption value={`${TAG_SEARCH_PREFIX}${term}`} className="wunderbar__more-results">
<Button className="wunderbar__tag-search" button="link">
<Button ref={exploreTagRef} className="wunderbar__tag-search" button="link">
{__('Explore')}
<div className="tag">{term.split(' ').join('')}</div>
</Button>