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

104
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,50 +98,60 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
}, [appState.noteTags, autocompleteInputFocused]); }, [appState.noteTags, autocompleteInputFocused]);
return ( return (
<form <div ref={containerRef}>
onSubmit={onFormSubmit} <form
className={`${tags.length > 0 ? 'mt-2' : ''}`} onSubmit={onFormSubmit}
> className={`${tags.length > 0 ? 'mt-2' : ''}`}
<Disclosure open={dropdownVisible} onChange={showDropdown}> >
<input <Disclosure open={dropdownVisible} onChange={showDropdown}>
ref={inputRef} <input
className={`${tags.length > 0 ? 'w-80' : 'w-70 mr-10'} bg-transparent text-xs ref={inputRef}
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}
type="text" type="text"
placeholder="Add tag" placeholder="Add tag"
onBlur={onBlur} onBlur={onBlur}
onFocus={onFocus} onFocus={onFocus}
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
tabIndex={tags.length === 0 ? 0 : -1} tabIndex={tags.length === 0 ? 0 : -1}
/> />
{dropdownVisible && (autocompleteTagResults.length > 0 || autocompleteTagHintVisible) && ( {dropdownVisible &&
<DisclosurePanel (autocompleteTagResults.length > 0 ||
ref={dropdownRef} autocompleteTagHintVisible) && (
className={`${tags.length > 0 ? 'w-80' : 'w-70 mr-10'} sn-dropdown flex flex-col py-2 absolute`} <DisclosurePanel
style={{ maxHeight: dropdownMaxHeight, maxWidth: tagsContainerMaxWidth }} className={`${
onBlur={closeOnBlur} tags.length > 0 ? 'w-80' : 'w-70 mr-10'
> } sn-dropdown flex flex-col py-2 absolute`}
<div className="overflow-y-auto"> style={{
{autocompleteTagResults.map((tagResult: SNTag) => ( maxHeight: dropdownMaxHeight,
<AutocompleteTagResult maxWidth: tagsContainerMaxWidth,
key={tagResult.uuid} }}
appState={appState} onBlur={closeOnBlur}
tagResult={tagResult} >
closeOnBlur={closeOnBlur} <div className="overflow-y-auto">
/> {autocompleteTagResults.map((tagResult: SNTag) => (
))} <AutocompleteTagResult
</div> key={tagResult.uuid}
{autocompleteTagHintVisible && ( appState={appState}
<AutocompleteTagHint tagResult={tagResult}
appState={appState} closeOnBlur={closeOnBlur}
closeOnBlur={closeOnBlur} />
/> ))}
</div>
{autocompleteTagHintVisible && (
<AutocompleteTagHint
appState={appState}
closeOnBlur={closeOnBlur}
/>
)}
</DisclosurePanel>
)} )}
</DisclosurePanel> </Disclosure>
)} </form>
</Disclosure> </div>
</form>
); );
}); });