rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: don't clear search query when navigating back to input

Browse Source
This commit is contained in:
Antonella Sgarlatta
2021-07-01 14:36:56 -03:00
parent 3e76ef6b6f
commit 353d46eb63
1 changed files with 58 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/assets/javascripts/components/AutocompleteTagInput.tsx
View File

@@ -25,10 +25,10 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
const [dropdownMaxHeight, setDropdownMaxHeight] = const [dropdownMaxHeight, setDropdownMaxHeight] =
useState<number | 'auto'>('auto'); useState<number | 'auto'>('auto');
const dropdownRef = useRef<HTMLDivElement>(); const containerRef = useRef<HTMLDivElement>();
const inputRef = useRef<HTMLInputElement>(); const inputRef = useRef<HTMLInputElement>();
const [closeOnBlur] = useCloseOnBlur(dropdownRef, (visible: boolean) => { const [closeOnBlur] = useCloseOnBlur(containerRef, (visible: boolean) => {
setDropdownVisible(visible); setDropdownVisible(visible);
appState.noteTags.clearAutocompleteSearch(); appState.noteTags.clearAutocompleteSearch();
}); });
@@ -69,7 +69,9 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
case 'ArrowDown': case 'ArrowDown':
event.preventDefault(); event.preventDefault();
if (autocompleteTagResults.length > 0) { if (autocompleteTagResults.length > 0) {
appState.noteTags.setFocusedTagResultUuid(autocompleteTagResults[0].uuid); appState.noteTags.setFocusedTagResultUuid(
autocompleteTagResults[0].uuid
);
} else if (autocompleteTagHintVisible) { } else if (autocompleteTagHintVisible) {
appState.noteTags.setAutocompleteTagHintFocused(true); appState.noteTags.setAutocompleteTagHintFocused(true);
} }
@@ -96,6 +98,7 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
}, [appState.noteTags, autocompleteInputFocused]); }, [appState.noteTags, autocompleteInputFocused]);
return ( return (
<div ref={containerRef}>
<form <form
onSubmit={onFormSubmit} onSubmit={onFormSubmit}
className={`${tags.length > 0 ? 'mt-2' : ''}`} className={`${tags.length > 0 ? 'mt-2' : ''}`}
@@ -103,7 +106,9 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
<Disclosure open={dropdownVisible} onChange={showDropdown}> <Disclosure open={dropdownVisible} onChange={showDropdown}>
<input <input
ref={inputRef} ref={inputRef}
className={`${tags.length > 0 ? 'w-80' : 'w-70 mr-10'} bg-transparent text-xs className={`${
tags.length > 0 ? 'w-80' : 'w-70 mr-10'
} bg-transparent text-xs
color-text no-border h-7 focus:outline-none focus:shadow-none focus:border-bottom`} color-text no-border h-7 focus:outline-none focus:shadow-none focus:border-bottom`}
value={autocompleteSearchQuery} value={autocompleteSearchQuery}
onChange={onSearchQueryChange} onChange={onSearchQueryChange}
@@ -114,11 +119,17 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
tabIndex={tags.length === 0 ? 0 : -1} tabIndex={tags.length === 0 ? 0 : -1}
/> />
{dropdownVisible && (autocompleteTagResults.length > 0 || autocompleteTagHintVisible) && ( {dropdownVisible &&
(autocompleteTagResults.length > 0 ||
autocompleteTagHintVisible) && (
<DisclosurePanel <DisclosurePanel
ref={dropdownRef} className={`${
className={`${tags.length > 0 ? 'w-80' : 'w-70 mr-10'} sn-dropdown flex flex-col py-2 absolute`} tags.length > 0 ? 'w-80' : 'w-70 mr-10'
style={{ maxHeight: dropdownMaxHeight, maxWidth: tagsContainerMaxWidth }} } sn-dropdown flex flex-col py-2 absolute`}
style={{
maxHeight: dropdownMaxHeight,
maxWidth: tagsContainerMaxWidth,
}}
onBlur={closeOnBlur} onBlur={closeOnBlur}
> >
<div className="overflow-y-auto"> <div className="overflow-y-auto">
@@ -141,5 +152,6 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
)} )}
</Disclosure> </Disclosure>
</form> </form>
</div>
); );
}); });