fix: keep mobile filing navigation selected

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;

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