Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-23 23:19:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve tags filtering ux

Browse Source
This commit is contained in:
thecodrr
2021-07-20 23:01:20 +05:00
parent 983a5e41db
commit 4107c09cfb
1 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/web/src/components/editor/header.js
View File

@@ -90,7 +90,7 @@ function Autosuggest({
sx, sx,
}) { }) {
const [filtered, setFiltered] = useState([]); const [filtered, setFiltered] = useState([]);
const [selectedIndex, setSelectedIndex] = useState(0); const [selectedIndex, setSelectedIndex] = useState(-1);
const inputRef = useRef(); const inputRef = useRef();
return ( return (
<Flex <Flex
@@ -138,8 +138,13 @@ function Autosuggest({
}} }}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === "Enter") { if (e.key === "Enter") {
onAdd(e.target.value); if (selectedIndex > -1) {
onSelect(filtered[selectedIndex]);
} else {
onAdd(e.target.value);
}
e.target.value = ""; e.target.value = "";
setFiltered([]);
} else if (e.target.value === "" && e.key === "Backspace") { } else if (e.target.value === "" && e.key === "Backspace") {
onRemove(); onRemove();
} else if (e.key === "Escape") { } else if (e.key === "Escape") {
@@ -160,7 +165,8 @@ function Autosuggest({
}} }}
/> />
{filtered.length ? ( {filtered.length ? (
<Box <Flex
flexDirection="column"
sx={{ sx={{
position: "absolute", position: "absolute",
top: 25, top: 25,
@@ -191,7 +197,7 @@ function Autosuggest({
{renderSuggestion(item, selectedIndex === index)} {renderSuggestion(item, selectedIndex === index)}
</Button> </Button>
))} ))}
</Box> </Flex>
) : null} ) : null}
</Flex> </Flex>
); );