diff options
| -rw-r--r-- | src/app.js | 22 | ||||
| -rw-r--r-- | tools/send-enter-keys-test.js | 9 |
2 files changed, 30 insertions, 1 deletions
@@ -4674,6 +4674,23 @@ function tabsBar() { ); } +// On a desktop (a real pointer, a real keyboard) the amount field takes the +// cursor the moment it appears, so a picked recipient goes straight to typing +// the number. Once per field: it never pulls focus back after you've moved on, +// and never off another field you're in (a zap comment) — only off nothing, +// or off the recipient field that just resolved. Phones keep their keyboard +// down until a tap. +function focusSendAmount() { + if (matchMedia('(pointer: coarse)').matches) return; + const pane = document.querySelector('[data-send-pane]'); + const amt = pane && pane.querySelector('input[type=number]:not(:disabled)'); + if (!amt || amt._autoFocused) return; + amt._autoFocused = true; + const a = document.activeElement; + if (a && a !== document.body && !(a.classList && a.classList.contains('send-dest'))) return; + amt.focus(); +} + function tabContent() { if (ui.tab === 'settings') return settingsTab(); if (ui.tab === 'history') return historyTab(); @@ -4688,7 +4705,10 @@ function tabContent() { if (detailOpen) return hist; sendFocused = false; const pane = ui.tab === 'receive' ? receiveTab() : sendTab(); - if (ui.tab === 'send' && pane && pane.setAttribute) pane.setAttribute('data-send-pane', ''); + if (ui.tab === 'send' && pane && pane.setAttribute) { + pane.setAttribute('data-send-pane', ''); + requestAnimationFrame(focusSendAmount); + } // Past the recipient — an amount to enter, a payment to confirm — the // history is one more thing on screen while you're about to send. if (ui.tab === 'send' && sendFocused) return pane; diff --git a/tools/send-enter-keys-test.js b/tools/send-enter-keys-test.js index dc44ef3..5022c39 100644 --- a/tools/send-enter-keys-test.js +++ b/tools/send-enter-keys-test.js @@ -85,6 +85,15 @@ try { const field = await page.evaluate(() => document.querySelector('textarea.send-dest')?.value ?? document.querySelector('[data-send-pane] h3')?.textContent); check('Enter picked it: the amount step is up', !!amt, field); check('no line break went into the field', !/\n/.test(field || ''), JSON.stringify(field)); + await sleep(300); + check('desktop: the amount field has the cursor already', await page.evaluate(() => !matchMedia('(pointer: coarse)').matches && document.activeElement?.matches('[data-send-pane] input[type=number]')), + await page.evaluate(() => document.activeElement?.outerHTML.slice(0, 80))); + // left alone after that: a re-render (unit toggle) doesn't pull it back + await page.evaluate(() => document.activeElement.blur()); + await page.evaluate(() => document.querySelector('[data-send-pane] button[title]')?.click()); await sleep(300); + await page.evaluate(() => document.querySelector('[data-send-pane] button[title]')?.click()); await sleep(300); + check('...only once: a later render leaves focus alone', await page.evaluate(() => document.activeElement === document.body), + await page.evaluate(() => document.activeElement?.outerHTML.slice(0, 80))); console.log('[amount: Enter presses the main button]'); await page.focus('[data-send-pane] input[type=number]'); |