diff --git a/frontend/mobile-create-issue-nav.js b/frontend/mobile-create-issue-nav.js index 5d69516..9dde3d4 100644 --- a/frontend/mobile-create-issue-nav.js +++ b/frontend/mobile-create-issue-nav.js @@ -6,6 +6,7 @@ function createMobileCreateIssueNavigation(options) { const targetNames = new Map(Object.entries(targets).map(([name, target]) => [target, name])); let filingAvailable = !options.filing?.hidden; let observer = null; + let navigationLockUntil = 0; function select(name) { Object.entries(buttons).forEach(([key, button]) => { @@ -32,6 +33,7 @@ function createMobileCreateIssueNavigation(options) { block: 'start', behavior: prefersReducedMotion() ? 'auto' : 'smooth', }); + navigationLockUntil = Date.now() + 500; select(name); return true; } @@ -64,6 +66,7 @@ function createMobileCreateIssueNavigation(options) { return instance; }); observer = observe(entries => { + if (Date.now() < navigationLockUntil) return; const visible = entries .filter(entry => entry.isIntersecting && targetNames.has(entry.target)) .filter(entry => targetNames.get(entry.target) !== 'file' || filingAvailable) @@ -86,26 +89,30 @@ function createMobileCreateIssueNavigation(options) { function attachMobileCreateIssueNavigation({ document, window }) { const bySection = name => document.querySelector('[data-create-issue-section="' + name + '"]'); + const filing = document.getElementById('create-issue-filing'); + const sheet = document.getElementById('create-issue-sheet'); const navigation = createMobileCreateIssueNavigation({ root:document.querySelector('.create-issue-panel'), buttons:{describe:bySection('describe'), evidence:bySection('evidence'), file:bySection('file')}, targets:{ describe:document.getElementById('create-issue-describe'), evidence:document.getElementById('create-issue-evidence'), - file:document.getElementById('create-issue-filing'), + file:filing, }, - filing:document.getElementById('create-issue-filing'), + filing, prefersReducedMotion:() => window.matchMedia('(prefers-reduced-motion: reduce)').matches, }); navigation.start(); document.getElementById('file-new-issue').addEventListener('click', () => { - navigation.navigate('file'); + setTimeout(() => navigation.navigate('file'), 0); }); new MutationObserver(() => { - if (document.getElementById('create-issue-sheet').classList.contains('open')) { - navigation.reset(!document.getElementById('create-issue-filing').hidden); - } - }).observe(document.getElementById('create-issue-sheet'), { + navigation.setFilingAvailable(!filing.hidden); + if (!filing.hidden && sheet.classList.contains('open')) navigation.navigate('file'); + }).observe(filing, {attributes:true, attributeFilter:['hidden']}); + new MutationObserver(() => { + if (sheet.classList.contains('open')) navigation.reset(!filing.hidden); + }).observe(sheet, { attributes:true, attributeFilter:['class'], }); return navigation; diff --git a/tests/test_mobile_create_issue_navigation.py b/tests/test_mobile_create_issue_navigation.py index 71ed1cf..14f1e64 100644 --- a/tests/test_mobile_create_issue_navigation.py +++ b/tests/test_mobile_create_issue_navigation.py @@ -95,7 +95,8 @@ def test_new_issue_sheet_ships_mobile_navigation_in_lazy_offline_feature(): assert '"static/mobile-create-issue-nav.js"' in bundle assert "attachMobileCreateIssueNavigation({document, window})" in navigation_js assert "attachMobileCreateIssueNavigation({document, window})" not in dashboard_js - assert "document.getElementById('file-new-issue').addEventListener" in navigation_js + assert "attributeFilter:['hidden']" in navigation_js + assert "setTimeout(() => navigation.navigate('file'), 0)" in navigation_js assert "navigation.navigate('file')" in navigation_js assert "navigation.reset(" in navigation_js assert ".mobile-create-issue-nav" in css