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] =
useState<number | 'auto'>('auto');
const dropdownRef = useRef<HTMLDivElement>();
const containerRef = useRef<HTMLDivElement>();
const inputRef = useRef<HTMLInputElement>();
const [closeOnBlur] = useCloseOnBlur(dropdownRef, (visible: boolean) => {
const [closeOnBlur] = useCloseOnBlur(containerRef, (visible: boolean) => {
setDropdownVisible(visible);
appState.noteTags.clearAutocompleteSearch();
});
@@ -69,7 +69,9 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
case 'ArrowDown':
event.preventDefault();
if (autocompleteTagResults.length > 0) {
appState.noteTags.setFocusedTagResultUuid(autocompleteTagResults[0].uuid);
appState.noteTags.setFocusedTagResultUuid(
autocompleteTagResults[0].uuid
);
} else if (autocompleteTagHintVisible) {
appState.noteTags.setAutocompleteTagHintFocused(true);
}
@@ -96,50 +98,60 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
}, [appState.noteTags, autocompleteInputFocused]);
return (
<form
onSubmit={onFormSubmit}
className={`${tags.length > 0 ? 'mt-2' : ''}`}
>
<Disclosure open={dropdownVisible} onChange={showDropdown}>
<input
ref={inputRef}
className={`${tags.length > 0 ? 'w-80' : 'w-70 mr-10'} bg-transparent text-xs
<div ref={containerRef}>
<form
onSubmit={onFormSubmit}
className={`${tags.length > 0 ? 'mt-2' : ''}`}
>
<Disclosure open={dropdownVisible} onChange={showDropdown}>
<input
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`}
value={autocompleteSearchQuery}
onChange={onSearchQueryChange}
type="text"
placeholder="Add tag"
onBlur={onBlur}
onFocus={onFocus}
onKeyDown={onKeyDown}
tabIndex={tags.length === 0 ? 0 : -1}
/>
{dropdownVisible && (autocompleteTagResults.length > 0 || autocompleteTagHintVisible) && (
<DisclosurePanel
ref={dropdownRef}
className={`${tags.length > 0 ? 'w-80' : 'w-70 mr-10'} sn-dropdown flex flex-col py-2 absolute`}
style={{ maxHeight: dropdownMaxHeight, maxWidth: tagsContainerMaxWidth }}
onBlur={closeOnBlur}
>
<div className="overflow-y-auto">
{autocompleteTagResults.map((tagResult: SNTag) => (
<AutocompleteTagResult
key={tagResult.uuid}
appState={appState}
tagResult={tagResult}
closeOnBlur={closeOnBlur}
/>
))}
</div>
{autocompleteTagHintVisible && (
<AutocompleteTagHint
appState={appState}
closeOnBlur={closeOnBlur}
/>
value={autocompleteSearchQuery}
onChange={onSearchQueryChange}
type="text"
placeholder="Add tag"
onBlur={onBlur}
onFocus={onFocus}
onKeyDown={onKeyDown}
tabIndex={tags.length === 0 ? 0 : -1}
/>
{dropdownVisible &&
(autocompleteTagResults.length > 0 ||
autocompleteTagHintVisible) && (
<DisclosurePanel
className={`${
tags.length > 0 ? 'w-80' : 'w-70 mr-10'
} sn-dropdown flex flex-col py-2 absolute`}
style={{
maxHeight: dropdownMaxHeight,
maxWidth: tagsContainerMaxWidth,
}}
onBlur={closeOnBlur}
>
<div className="overflow-y-auto">
{autocompleteTagResults.map((tagResult: SNTag) => (
<AutocompleteTagResult
key={tagResult.uuid}
appState={appState}
tagResult={tagResult}
closeOnBlur={closeOnBlur}
/>
))}
</div>
{autocompleteTagHintVisible && (
<AutocompleteTagHint
appState={appState}
closeOnBlur={closeOnBlur}
/>
)}
</DisclosurePanel>
)}
</DisclosurePanel>
)}
</Disclosure>
</form>
</Disclosure>
</form>
</div>
);
});