n/nyxmuks
1
0
Fork 0
forked from Mirrors/gomuks
Code Pull requests Activity

web/composer: fix enter behavior with empty autocomplete

Browse source
This commit is contained in:
Tulir Asokan 2024-11-09 21:17:51 +02:00
parent 25e86fd381
commit 00a2070ff3
2 changed files with 12 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/src/ui/composer/Autocompleter.tsx
View file

@ -85,9 +85,9 @@ function useAutocompleter<T>({
setAutocomplete(null) setAutocomplete(null)
} }
} }
}, [onSelect, params.selected]) }, [onSelect, setAutocomplete, params.selected, params.close])
const selected = params.selected !== undefined ? positiveMod(params.selected, items.length) : -1 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 {items.map((item, i) => <div
onClick={onClick} onClick={onClick}
data-index={i} data-index={i}

17
web/src/ui/composer/MessageComposer.tsx
View file

@ -199,19 +199,22 @@ const MessageComposer = () => {
const onComposerKeyDown = useEvent((evt: React.KeyboardEvent<HTMLTextAreaElement>) => { const onComposerKeyDown = useEvent((evt: React.KeyboardEvent<HTMLTextAreaElement>) => {
const inp = evt.currentTarget const inp = evt.currentTarget
const fullKey = keyToString(evt) 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 let autocompleteUpdate: Partial<AutocompleteQuery> | null | undefined
if (fullKey === "Tab" || fullKey === "ArrowDown") { if (fullKey === "Tab" || fullKey === "ArrowDown") {
autocompleteUpdate = { selected: (autocomplete.selected ?? -1) + 1 } autocompleteUpdate = { selected: (autocomplete.selected ?? -1) + 1 }
} else if (fullKey === "Shift+Tab" || fullKey === "ArrowUp") { } else if (fullKey === "Shift+Tab" || fullKey === "ArrowUp") {
autocompleteUpdate = { selected: (autocomplete.selected ?? 0) - 1 } autocompleteUpdate = { selected: (autocomplete.selected ?? 0) - 1 }
} else if (fullKey === "Enter") { } 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") { } else if (fullKey === "Escape") {
autocompleteUpdate = null autocompleteUpdate = null
if (autocomplete.frozenQuery) { if (autocomplete.frozenQuery) {
@ -226,8 +229,6 @@ const MessageComposer = () => {
setAutocomplete(autocompleteUpdate && { ...autocomplete, ...autocompleteUpdate }) setAutocomplete(autocompleteUpdate && { ...autocomplete, ...autocompleteUpdate })
evt.preventDefault() evt.preventDefault()
} }
} else if (fullKey === "Enter") {
sendMessage(evt)
} else if (fullKey === "ArrowUp" && inp.selectionStart === 0 && inp.selectionEnd === 0) { } else if (fullKey === "ArrowUp" && inp.selectionStart === 0 && inp.selectionEnd === 0) {
const currentlyEditing = editing const currentlyEditing = editing
? roomCtx.ownMessages.indexOf(editing.rowid) ? roomCtx.ownMessages.indexOf(editing.rowid)