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

fix weird search suggestion behavior

Browse source
This commit is contained in:
Sean Yesmunt 2020-12-30 17:16:06 -05:00
parent d0f42ce6b3
commit 3317d32ae2
3 changed files with 10 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
ui/component/wunderbarSuggestions/index.js
View file

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

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

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

3
ui/scss/component/_wunderbar.scss
View file

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