web/composer: fix enter behavior with empty autocomplete

tulir · Nov 9, 2024 · 00a2070 · 00a2070
1 parent 25e86fd
commit 00a2070
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/web/src/ui/composer/Autocompleter.tsx b/web/src/ui/composer/Autocompleter.tsx
@@ -85,9 +85,9 @@ function useAutocompleter<T>({
 				setAutocomplete(null)
 			}
 		}
-	}, [onSelect, params.selected])
+	}, [onSelect, setAutocomplete, params.selected, params.close])
 	const selected = params.selected !== undefined ? positiveMod(params.selected, items.length) : -1
-	return <div className="autocompletions">
+	return <div className={`autocompletions ${items.length === 0 ? "empty" : "has-items"}`} id="composer-autocompletions">
 		{items.map((item, i) => <div
 			onClick={onClick}
 			data-index={i}

diff --git a/web/src/ui/composer/MessageComposer.tsx b/web/src/ui/composer/MessageComposer.tsx
@@ -199,19 +199,22 @@ const MessageComposer = () => {
 	const onComposerKeyDown = useEvent((evt: React.KeyboardEvent<HTMLTextAreaElement>) => {
 		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<AutocompleteQuery> | 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)