web: fix pressing enter to add a new tag from list of suggestion fails (#3548)

* web: added ref to control resturn key func

* web: click should open autosuggestions menu

---------

Co-authored-by: Abdullah Atta <abdullahatta@streetwriters.co>
This commit is contained in:
Muhammad Ali
2023-11-17 08:30:13 +05:00
committed by GitHub
parent 8b4cea7339
commit e557047af1

View File

@@ -86,6 +86,7 @@ type AutosuggestProps = {
export function Autosuggest(props: AutosuggestProps) {
const { sessionId, filter, onRemove, onSelect, onAdd, defaultItems } = props;
const inputRef = useRef<HTMLInputElement>(null);
const arrowDown = useRef<boolean>();
const filteredItems = useRef<any[]>([]);
const { openMenu, closeMenu, isOpen } = useMenuTrigger();
const clearInput = useCallback(() => {
@@ -178,8 +179,13 @@ export function Autosuggest(props: AutosuggestProps) {
data-test-id="editor-tag-input"
onFocus={() => {
const text = getInputValue();
console.log(defaultItems);
if (!text) onOpenMenu(defaultItems.slice());
else onOpenMenu([]);
}}
onClick={() => {
const text = getInputValue();
if (!text) onOpenMenu(defaultItems.slice());
else onOpenMenu([]);
}}
onChange={(e) => {
const { value } = e.target;
@@ -191,22 +197,17 @@ export function Autosuggest(props: AutosuggestProps) {
}}
onKeyDown={(e) => {
const text = getInputValue();
if (
e.key === "Enter" &&
!!text &&
isOpen &&
filteredItems.current.length <= 0
) {
if (e.key === "Enter" && !!text && isOpen && !arrowDown.current) {
onAction("add", text);
} else if (e.key === "Enter" && !!text && isOpen) {
onAction("select", filteredItems.current[0]);
} else if (!text && e.key === "Backspace") {
onRemove();
closeMenu();
} else if (e.key === "Escape") {
arrowDown.current = false;
closeMenu();
e.stopPropagation();
} else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
arrowDown.current = true;
if (e.key === "ArrowDown" && !text) onOpenMenu(defaultItems.slice());
e.preventDefault();