fix(miniapp): prevent focus loss in destinations form

This commit is contained in:
2026-03-16 04:46:09 +04:00
parent 77094baa2b
commit b71480e9f1

View File

@@ -1,4 +1,4 @@
import { Show, For, createSignal } from 'solid-js' import { Show, For, Index, createSignal } from 'solid-js'
import { ArrowLeft, Globe, Plus, User } from 'lucide-solid' import { ArrowLeft, Globe, Plus, User } from 'lucide-solid'
import { useNavigate } from '@solidjs/router' import { useNavigate } from '@solidjs/router'
@@ -686,18 +686,18 @@ export default function SettingsRoute() {
fallback={<p class="empty-state">{copy().rentPaymentDestinationsEmpty}</p>} fallback={<p class="empty-state">{copy().rentPaymentDestinationsEmpty}</p>}
> >
<div style={{ display: 'grid', gap: '12px' }}> <div style={{ display: 'grid', gap: '12px' }}>
<For each={billingForm().rentPaymentDestinations}> <Index each={billingForm().rentPaymentDestinations}>
{(destination, index) => ( {(destination, index) => (
<Card muted wide> <Card muted wide>
<div class="editor-grid"> <div class="editor-grid">
<Field label={copy().rentPaymentDestinationLabel} wide> <Field label={copy().rentPaymentDestinationLabel} wide>
<Input <Input
value={destination.label} value={destination().label}
onInput={(e) => onInput={(e) =>
setBillingForm((f) => { setBillingForm((f) => {
const next = [...f.rentPaymentDestinations] const next = [...f.rentPaymentDestinations]
next[index()] = { next[index] = {
...next[index()]!, ...next[index]!,
label: e.currentTarget.value label: e.currentTarget.value
} }
return { ...f, rentPaymentDestinations: next } return { ...f, rentPaymentDestinations: next }
@@ -707,12 +707,12 @@ export default function SettingsRoute() {
</Field> </Field>
<Field label={copy().rentPaymentDestinationRecipient} wide> <Field label={copy().rentPaymentDestinationRecipient} wide>
<Input <Input
value={destination.recipientName ?? ''} value={destination().recipientName ?? ''}
onInput={(e) => onInput={(e) =>
setBillingForm((f) => { setBillingForm((f) => {
const next = [...f.rentPaymentDestinations] const next = [...f.rentPaymentDestinations]
next[index()] = { next[index] = {
...next[index()]!, ...next[index]!,
recipientName: e.currentTarget.value || null recipientName: e.currentTarget.value || null
} }
return { ...f, rentPaymentDestinations: next } return { ...f, rentPaymentDestinations: next }
@@ -722,12 +722,12 @@ export default function SettingsRoute() {
</Field> </Field>
<Field label={copy().rentPaymentDestinationBank} wide> <Field label={copy().rentPaymentDestinationBank} wide>
<Input <Input
value={destination.bankName ?? ''} value={destination().bankName ?? ''}
onInput={(e) => onInput={(e) =>
setBillingForm((f) => { setBillingForm((f) => {
const next = [...f.rentPaymentDestinations] const next = [...f.rentPaymentDestinations]
next[index()] = { next[index] = {
...next[index()]!, ...next[index]!,
bankName: e.currentTarget.value || null bankName: e.currentTarget.value || null
} }
return { ...f, rentPaymentDestinations: next } return { ...f, rentPaymentDestinations: next }
@@ -737,12 +737,12 @@ export default function SettingsRoute() {
</Field> </Field>
<Field label={copy().rentPaymentDestinationAccount} wide> <Field label={copy().rentPaymentDestinationAccount} wide>
<Input <Input
value={destination.account} value={destination().account}
onInput={(e) => onInput={(e) =>
setBillingForm((f) => { setBillingForm((f) => {
const next = [...f.rentPaymentDestinations] const next = [...f.rentPaymentDestinations]
next[index()] = { next[index] = {
...next[index()]!, ...next[index]!,
account: e.currentTarget.value account: e.currentTarget.value
} }
return { ...f, rentPaymentDestinations: next } return { ...f, rentPaymentDestinations: next }
@@ -752,12 +752,12 @@ export default function SettingsRoute() {
</Field> </Field>
<Field label={copy().rentPaymentDestinationLink} wide> <Field label={copy().rentPaymentDestinationLink} wide>
<Input <Input
value={destination.link ?? ''} value={destination().link ?? ''}
onInput={(e) => onInput={(e) =>
setBillingForm((f) => { setBillingForm((f) => {
const next = [...f.rentPaymentDestinations] const next = [...f.rentPaymentDestinations]
next[index()] = { next[index] = {
...next[index()]!, ...next[index]!,
link: e.currentTarget.value || null link: e.currentTarget.value || null
} }
return { ...f, rentPaymentDestinations: next } return { ...f, rentPaymentDestinations: next }
@@ -767,12 +767,12 @@ export default function SettingsRoute() {
</Field> </Field>
<Field label={copy().rentPaymentDestinationNote} wide> <Field label={copy().rentPaymentDestinationNote} wide>
<Textarea <Textarea
value={destination.note ?? ''} value={destination().note ?? ''}
onInput={(e) => onInput={(e) =>
setBillingForm((f) => { setBillingForm((f) => {
const next = [...f.rentPaymentDestinations] const next = [...f.rentPaymentDestinations]
next[index()] = { next[index] = {
...next[index()]!, ...next[index]!,
note: e.currentTarget.value || null note: e.currentTarget.value || null
} }
return { ...f, rentPaymentDestinations: next } return { ...f, rentPaymentDestinations: next }
@@ -788,7 +788,7 @@ export default function SettingsRoute() {
setBillingForm((f) => ({ setBillingForm((f) => ({
...f, ...f,
rentPaymentDestinations: f.rentPaymentDestinations.filter( rentPaymentDestinations: f.rentPaymentDestinations.filter(
(_, idx) => idx !== index() (_, idx) => idx !== index
) )
})) }))
} }
@@ -799,7 +799,7 @@ export default function SettingsRoute() {
</div> </div>
</Card> </Card>
)} )}
</For> </Index>
</div> </div>
</Show> </Show>
<div> <div>