Change search default

- clicking a suggestion triggers a search, navigation
- panel stays open until user dismisses it
- panel now requires 2 Esc / clicks to close it
- update broken tests

Author: prushforth

package-lock.json

@@ -68,14 +68,23 @@ export var SearchButton = Control.extend({
       function (e) {
         if (e.key === 'Escape') {
           DomEvent.stop(e);
-          this._closePanel();
+          if (this._input.value) {
+            this._input.value = '';
+            this._results.innerHTML = '';
+          } else {
+            this._closePanel();
+          }
         } else if (e.key === 'Enter') {
           DomEvent.stop(e);
           if (this._debounceTimer) {
             clearTimeout(this._debounceTimer);
             this._debounceTimer = null;
           }
           this._doSearch(this._input.value.trim());
+        } else if (e.key === 'ArrowDown' || e.key === 'Down') {
+          DomEvent.stop(e);
+          let first = this._results.querySelector('.mapml-search-result');
+          if (first) first.focus();
         }
       },
       this
@@ -381,6 +390,44 @@ export var SearchButton = Control.extend({
 
   _defaultSearchHandler: function ({ query, responses }) {
     this._renderResults(responses);
+    // Navigate to the first result
+    for (let { data } of responses) {
+      if (!data || !data.features) continue;
+      for (let feature of data.features) {
+        this._navigateToFeature(feature);
+        break;
+      }
+      break;
+    }
+    // Keep focus on the search input so the user can refine or review
+    this._input.focus();
+  },
+
+  _navigateToFeature: function (feature) {
+    let map = this._map;
+    // Standard GeoJSON bbox
+    let bbox = feature.bbox;
+    // Photon stores extent in properties.extent [west, south, east, north]
+    if (
+      (!bbox || bbox.length !== 4) &&
+      feature.properties &&
+      feature.properties.extent &&
+      feature.properties.extent.length === 4
+    ) {
+      bbox = feature.properties.extent;
+    }
+    if (bbox && bbox.length === 4) {
+      let [west, south, east, north] = bbox;
+      map.fitBounds(latLngBounds([south, west], [north, east]));
+    } else if (
+      feature.geometry &&
+      feature.geometry.coordinates &&
+      feature.geometry.coordinates.length >= 2
+    ) {
+      let [lon, lat] = feature.geometry.coordinates;
+      let zoom = (feature.properties && feature.properties.zoom) || 14;
+      map.setView([lat, lon], zoom);
+    }
   },
 
   _renderResults: function (responses) {
@@ -399,11 +446,44 @@ export var SearchButton = Control.extend({
               this._selectResult(f, l)
           )(feature, layer)
         );
+        btn.addEventListener('keydown', this._resultKeydown.bind(this));
         this._results.appendChild(btn);
       }
     }
   },
 
+  _resultKeydown: function (e) {
+    let btn = e.target;
+    let prev = btn.previousElementSibling;
+    let next = btn.nextElementSibling;
+    if (
+      e.key === 'ArrowDown' ||
+      e.key === 'ArrowRight' ||
+      e.key === 'Down' ||
+      e.key === 'Right'
+    ) {
+      DomEvent.stop(e);
+      if (next && next.classList.contains('mapml-search-result')) {
+        next.focus();
+      }
+    } else if (
+      e.key === 'ArrowUp' ||
+      e.key === 'ArrowLeft' ||
+      e.key === 'Up' ||
+      e.key === 'Left'
+    ) {
+      DomEvent.stop(e);
+      if (prev && prev.classList.contains('mapml-search-result')) {
+        prev.focus();
+      } else {
+        this._input.focus();
+      }
+    } else if (e.key === 'Escape') {
+      DomEvent.stop(e);
+      this._input.focus();
+    }
+  },
+
   _formatResultName: function (props) {
     if (!props) return this._locale?.searchResultWithNoName || 'Unnamed';
     if (props.display_name) return props.display_name;
@@ -420,31 +500,10 @@ export var SearchButton = Control.extend({
   },
 
   _selectResult: function (feature, layer) {
-    let map = this._map;
-    // Standard GeoJSON bbox
-    let bbox = feature.bbox;
-    // Photon stores extent in properties.extent [west, south, east, north]
-    if (
-      (!bbox || bbox.length !== 4) &&
-      feature.properties &&
-      feature.properties.extent &&
-      feature.properties.extent.length === 4
-    ) {
-      bbox = feature.properties.extent;
-    }
-    if (bbox && bbox.length === 4) {
-      let [west, south, east, north] = bbox;
-      map.fitBounds(latLngBounds([south, west], [north, east]));
-    } else if (
-      feature.geometry &&
-      feature.geometry.coordinates &&
-      feature.geometry.coordinates.length >= 2
-    ) {
-      let [lon, lat] = feature.geometry.coordinates;
-      let zoom = (feature.properties && feature.properties.zoom) || 14;
-      map.setView([lat, lon], zoom);
-    }
-    this._closePanel();
+    // Use the suggestion's display name as a refined search query
+    let name = this._formatResultName(feature.properties);
+    this._input.value = name;
+    this._doSearch(name);
   }
 });
 

src/mapml/control/SearchButton.js

@@ -46,22 +46,39 @@ test.describe('Search default handler tests', () => {
     expect(texts[2]).toBe('Gatineau, Quebec, Canada');
   });
 
-  test('Clicking a result with bbox fits bounds and closes panel', async () => {
-    // Click the first result (Ottawa — has bbox)
+  test('Clicking a suggestion result triggers search and navigates', async () => {
+    // Click the first suggestion (Ottawa — has bbox)
     await page.click('.mapml-search-result:first-child');
+    // Wait for the search triggered by _selectResult to complete
     await page.waitForTimeout(500);
-    // Panel should be closed
+    // Panel should remain open (suggestion selection now triggers a search)
     let hasOpenClass = await page.$eval('.mapml-search-panel', (panel) =>
       panel.classList.contains('mapml-search-panel-open')
     );
-    expect(hasOpenClass).toBe(false);
+    expect(hasOpenClass).toBe(true);
+    // Input should contain the suggestion's display name
+    let inputValue = await page.$eval(
+      '.mapml-search-input',
+      (input) => input.value
+    );
+    expect(inputValue).toBe('Ottawa, Ontario, Canada');
+    // Search results should be rendered (search endpoint returns 1 result)
+    let count = await page.$$eval(
+      '.mapml-search-result',
+      (btns) => btns.length
+    );
+    expect(count).toBe(1);
     // Check the map center moved toward Ottawa (lat ~45.4, lon ~-75.65)
     let center = await page.$eval('[data-testid=viewer]', (viewer) => {
       let map = viewer._map;
       return { lat: map.getCenter().lat, lng: map.getCenter().lng };
     });
     expect(center.lat).toBeCloseTo(45.4, 0);
     expect(center.lng).toBeCloseTo(-75.65, 0);
+    // Close panel to restore clean state for subsequent tests
+    await page.press('.mapml-search-input', 'Escape'); // clear input
+    await page.press('.mapml-search-input', 'Escape'); // close panel
+    await page.waitForTimeout(400);
   });
 
   test('Pressing Enter in input performs search', async () => {

test/e2e/core/searchDefault.test.js

@@ -51,6 +51,10 @@ test.describe('Search i18n tests (Japanese)', () => {
     // Tokyo bbox center is roughly (35.7, 139.4)
     expect(center.lat).toBeCloseTo(35.7, 0);
     expect(center.lng).toBeCloseTo(139.4, 0);
+    // Close panel to restore clean state for subsequent tests
+    await page.press('.mapml-search-input', 'Escape'); // clear input
+    await page.press('.mapml-search-input', 'Escape'); // close panel
+    await page.waitForTimeout(400);
   });
 
   test('Search query is properly URL-encoded for non-Latin characters', async () => {