diff --git a/web/src/ui/composer/Autocompleter.tsx b/web/src/ui/composer/Autocompleter.tsx index 5c1c87e..733fed1 100644 --- a/web/src/ui/composer/Autocompleter.tsx +++ b/web/src/ui/composer/Autocompleter.tsx @@ -85,9 +85,9 @@ function useAutocompleter({ setAutocomplete(null) } } - }, [onSelect, params.selected]) + }, [onSelect, setAutocomplete, params.selected, params.close]) const selected = params.selected !== undefined ? positiveMod(params.selected, items.length) : -1 - return
+ return
{items.map((item, i) =>
{ const onComposerKeyDown = useEvent((evt: React.KeyboardEvent) => { const inp = evt.currentTarget const fullKey = keyToString(evt) - if (autocomplete) { + if (fullKey === "Enter" && ( + // If the autocomplete already has a selected item or has no results, send message even if it's open. + // Otherwise, don't send message on enter, select the first autocomplete entry instead. + !autocomplete + || autocomplete.selected !== undefined + || !document.getElementById("composer-autocompletions")?.classList.contains("has-items") + )) { + sendMessage(evt) + } else if (autocomplete) { let autocompleteUpdate: Partial | null | undefined if (fullKey === "Tab" || fullKey === "ArrowDown") { autocompleteUpdate = { selected: (autocomplete.selected ?? -1) + 1 } } else if (fullKey === "Shift+Tab" || fullKey === "ArrowUp") { autocompleteUpdate = { selected: (autocomplete.selected ?? 0) - 1 } } else if (fullKey === "Enter") { - if (autocomplete.selected !== undefined) { - // Don't capture enter if a result is already selected - sendMessage(evt) - } else { - autocompleteUpdate = { selected: 0, close: true } - } + autocompleteUpdate = { selected: 0, close: true } } else if (fullKey === "Escape") { autocompleteUpdate = null if (autocomplete.frozenQuery) { @@ -226,8 +229,6 @@ const MessageComposer = () => { setAutocomplete(autocompleteUpdate && { ...autocomplete, ...autocompleteUpdate }) evt.preventDefault() } - } else if (fullKey === "Enter") { - sendMessage(evt) } else if (fullKey === "ArrowUp" && inp.selectionStart === 0 && inp.selectionEnd === 0) { const currentlyEditing = editing ? roomCtx.ownMessages.indexOf(editing.rowid)