fix: RDP keyboard capture yields to form elements in modals and toolbars

Keyboard events now check if focus is on an input, textarea, select, or
contenteditable element and let the browser handle them normally. Also
fixes connectRdp type (Awaited<>) and async onMounted in RdpCanvas.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell 2026-03-16 12:49:30 -04:00
parent 8d4ee04285
commit a75e21138e
2 changed files with 24 additions and 6 deletions

View File

@ -12,7 +12,7 @@ const props = defineProps<{
const container = ref<HTMLDivElement | null>(null)
const { connectRdp } = useRdp()
let rdpSession: ReturnType<ReturnType<typeof useRdp>['connectRdp']> | null = null
let rdpSession: Awaited<ReturnType<ReturnType<typeof useRdp>['connectRdp']>> | null = null
// Expose to parent (RdpToolbar uses these)
const sendClipboard = (text: string) => rdpSession?.sendClipboardText(text)
@ -20,10 +20,10 @@ const disconnect = () => rdpSession?.disconnect()
defineExpose({ sendClipboard, disconnect })
onMounted(() => {
onMounted(async () => {
if (!container.value) return
rdpSession = connectRdp(
rdpSession = await connectRdp(
container.value,
props.hostId,
props.hostName,

View File

@ -237,10 +237,28 @@ export function useRdp() {
},
)
// Keyboard input
// Keyboard input — attached to document for global capture, but yield to
// form elements (inputs, textareas, selects, contenteditable) so modals,
// toolbars, and other UI overlays can receive keystrokes normally.
const keyboard = new Guacamole.Keyboard(document)
keyboard.onkeydown = (keysym: number) => client.sendKeyEvent(1, keysym)
keyboard.onkeyup = (keysym: number) => client.sendKeyEvent(0, keysym)
function isTypingInFormElement(): boolean {
const el = document.activeElement as HTMLElement | null
if (!el) return false
const tag = el.tagName
return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || el.isContentEditable
}
keyboard.onkeydown = (keysym: number) => {
if (isTypingInFormElement()) return true // let browser handle it
client.sendKeyEvent(1, keysym)
return false
}
keyboard.onkeyup = (keysym: number) => {
if (isTypingInFormElement()) return true
client.sendKeyEvent(0, keysym)
return false
}
// Initiate the WebSocket connection
client.connect()