diff --git a/overlay/src/app/pages/auth/ServerPicker.tsx b/overlay/src/app/pages/auth/ServerPicker.tsx index 4e639e8..7b89041 100644 --- a/overlay/src/app/pages/auth/ServerPicker.tsx +++ b/overlay/src/app/pages/auth/ServerPicker.tsx @@ -1,4 +1,5 @@ import React, { + ChangeEventHandler, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, @@ -21,6 +22,7 @@ import { } from 'folds'; import FocusTrap from 'focus-trap-react'; +import { useDebounce } from '../../hooks/useDebounce'; import { stopPropagation } from '../../utils/keyboard'; export function ServerPicker({ @@ -49,6 +51,13 @@ export function ServerPicker({ } }, [server]); + const debounceServerSelect = useDebounce(onServerChange, { wait: 700 }); + + const handleServerChange: ChangeEventHandler = (evt) => { + const inputServer = evt.target.value.trim(); + if (inputServer) debounceServerSelect(inputServer); + }; + const handleBlur: FocusEventHandler = (evt) => { const inputServer = evt.target.value.trim(); if (inputServer && inputServer !== server) { @@ -88,6 +97,7 @@ export function ServerPicker({ variant={allowCustomServer ? 'Background' : 'Surface'} outlined defaultValue={server} + onChange={handleServerChange} onBlur={handleBlur} onKeyDown={handleKeyDown} size="500"