PayFlow: hacky focus management for modal

This commit is contained in:
Anton Kovalenko 2021-07-18 00:31:56 +03:00
parent 3f5163fa55
commit ceea807b81
3 changed files with 9 additions and 3 deletions

@ -215,4 +215,4 @@
</SiteCard> </SiteCard>
</SiteDeck> </SiteDeck>
<PayFlow bind:lnurl={getInvoiceFor}/> <PayFlow bind:lnurl={getInvoiceFor} hasAmount={amounts[payway.id]}/>

@ -16,6 +16,7 @@
let input; let input;
export let value = null; export let value = null;
export let isComplete = false; export let isComplete = false;
export let focusOnMount = false;
let maskRef, imask, unmask, attrs; let maskRef, imask, unmask, attrs;
@ -55,6 +56,8 @@
onMount(() => { onMount(() => {
maskRef = IMask(input, imask); maskRef = IMask(input, imask);
if (focusOnMount)
input.focus();
setValue(value); setValue(value);
}); });

@ -10,6 +10,7 @@
import Tipped from './Tipped.svelte'; import Tipped from './Tipped.svelte';
export let lnurl = undefined; export let lnurl = undefined;
export let hasAmount;
let isOpen; let isOpen;
let res1; let res1;
let res2; let res2;
@ -87,7 +88,9 @@
</script> </script>
<Modal {isOpen} toggle={dismiss} on:open={()=>cancelButton.focus()} size='lg'> <Modal {isOpen} toggle={dismiss}
on:open="{()=>{if (hasAmount) cancelButton.focus()}}"
size='lg'>
<ModalHeader>BOLT11 invoice: {stage}</ModalHeader> <ModalHeader>BOLT11 invoice: {stage}</ModalHeader>
<ModalBody> <ModalBody>
{#if confirmAmount} {#if confirmAmount}
@ -97,7 +100,7 @@
<div class="input-group"> <div class="input-group">
{#key minSendSat} {#key minSendSat}
<InputMask bind:value={amount} <InputMask bind:value={amount}
autofocus focusOnMount={true}
unmask unmask
imask={{ imask={{
mask: Number, scale:0, mask: Number, scale:0,