fix weird search suggestion behavior

ui/component/wunderbarSuggestions/index.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { selectLanguage, makeSelectClientSetting } from 'redux/selectors/settings';
 import { doToast } from 'redux/actions/notifications';
 import { doSearch } from 'redux/actions/search';
-import { doOpenModal } from 'redux/actions/app';
+import { doOpenModal, doHideModal } from 'redux/actions/app';
 import { withRouter } from 'react-router';
 import { doResolveUris, SETTINGS } from 'lbry-redux';
 import analytics from 'analytics';
@@ -24,6 +24,7 @@ const perform = (dispatch, ownProps) => ({
   },
   doShowSnackBar: message => dispatch(doToast({ isError: true, message })),
   doOpenMobileSearch: () => dispatch(doOpenModal(MODALS.MOBILE_SEARCH)),
+  doCloseMobileSearch: () => dispatch(doHideModal()),
 });
 
 export default withRouter(connect(select, perform)(Wunderbar));

ui/component/wunderbarSuggestions/view.jsx

@@ -35,11 +35,14 @@ type Props = {
   doShowSnackBar: string => void,
   showMature: boolean,
   isMobile: boolean,
+  doCloseMobileSearch: () => void,
 };
 
 export default function WunderBarSuggestions(props: Props) {
-  const { navigateToSearchPage, doShowSnackBar, doResolveUris, showMature, isMobile } = props;
+  const { navigateToSearchPage, doShowSnackBar, doResolveUris, showMature, isMobile, doCloseMobileSearch } = props;
   const inputRef = React.useRef();
+  const isFocused = inputRef && inputRef.current && inputRef.current === document.activeElement;
+
   const {
     push,
     location: { search },
@@ -76,6 +79,8 @@ export default function WunderBarSuggestions(props: Props) {
       return;
     }
 
+    doCloseMobileSearch();
+
     const includesLbryTvProd = value.includes(WEB_PROD_PREFIX);
     const includesLbryTvLocal = value.includes(WEB_LOCAL_PREFIX);
     const includesLbryTvDev = value.includes(WEB_DEV_PREFIX);
@@ -182,7 +187,7 @@ export default function WunderBarSuggestions(props: Props) {
             value={term}
           />
 
-          {results && results.length > 0 && (
+          {isFocused && results && results.length > 0 && (
             <ComboboxPopover
               portal={false}
               className={classnames('wunderbar__suggestions', { 'wunderbar__suggestions--mobile': isMobile })}

ui/scss/component/_wunderbar.scss

@@ -181,7 +181,7 @@
 
 .wunderbar__more-results {
   margin-top: var(--spacing-xs);
-  margin-left: var(--spacing-m);
+  margin-left: var(--spacing-s);
   margin-bottom: var(--spacing-l);
 
   .button {
@@ -189,7 +189,6 @@
   }
 
   @media (min-width: $breakpoint-small) {
-    margin-left: var(--spacing-s);
     margin-bottom: var(--spacing-m);
   }
 }