Welcome,
{' '}
{props.ctx.account.name}
@@ -508,6 +511,26 @@ export function LoginForm(props: {
const [inputRef, setInputRef] = createSignal
()
+ onMount(() => {
+ const pasteHandler = () => {
+ if (document.activeElement !== inputRef()) {
+ inputRef()?.focus()
+ }
+ }
+
+ const handleKeyDown = () => {
+ inputRef()?.focus()
+ }
+
+ window.addEventListener('paste', pasteHandler)
+ window.addEventListener('keydown', handleKeyDown)
+
+ onCleanup(() => {
+ window.removeEventListener('paste', pasteHandler)
+ window.removeEventListener('keydown', handleKeyDown)
+ })
+ })
+
return (
inputRef()?.focus()} mode="outin">
diff --git a/packages/repl/src/components/settings/login/PhoneInput.tsx b/packages/repl/src/components/settings/login/PhoneInput.tsx
index a01c06f..3b1cc95 100644
--- a/packages/repl/src/components/settings/login/PhoneInput.tsx
+++ b/packages/repl/src/components/settings/login/PhoneInput.tsx
@@ -29,26 +29,11 @@ interface PhoneInputProps {
}
export function PhoneInput(props: PhoneInputProps) {
+ let inputRef: HTMLInputElement | undefined
const [countriesList, setCountriesList] = createSignal([])
const [chosenCode, setChosenCode] = createSignal()
const [inputValue, setInputValue] = createSignal('+')
- onMount(async () => {
- const { countries, countryByIp } = await workerInvoke('telegram', 'loadCountries', { accountId: props.accountId })
- setCountriesList(countries)
-
- if (inputValue() === '+') {
- // guess the country code
- for (const country of countries) {
- if (country.iso2 === countryByIp) {
- setChosenCode(mapCountryCode(country, country.countryCodes[0]))
- setInputValue(`+${country.countryCodes[0].countryCode} `)
- break
- }
- }
- }
- })
-
const handleInput = (e: InputEvent) => {
const el = e.currentTarget as HTMLInputElement
const value = el.value
@@ -155,6 +140,26 @@ export function PhoneInput(props: PhoneInputProps) {
}
}
+ onMount(async () => {
+ const { countries, countryByIp } = await workerInvoke('telegram', 'loadCountries', { accountId: props.accountId })
+ setCountriesList(countries)
+
+ if (chosenCode() === undefined) {
+ handleInput({ currentTarget: inputRef } as any)
+ }
+
+ if (inputValue() === '+') {
+ // guess the country code
+ for (const country of countries) {
+ if (country.iso2 === countryByIp) {
+ setChosenCode(mapCountryCode(country, country.countryCodes[0]))
+ setInputValue(`+${country.countryCodes[0].countryCode} `)
+ break
+ }
+ }
+ }
+ })
+
const handleKeyPress = (e: KeyboardEvent) => {
if (e.key === 'Enter' && chosenCode() !== undefined) {
props.onSubmit?.()
@@ -180,7 +185,10 @@ export function PhoneInput(props: PhoneInputProps) {
onKeyPress={handleKeyPress}
autocomplete="off"
disabled={props.disabled}
- ref={props.ref}
+ ref={(e: HTMLInputElement) => {
+ inputRef = e
+ props.ref?.(e)
+ }}
/>
)