fix: fix bug with fitbounds array, fix bug where clearbutton doesnt s…

…how up after pressing enter (#79)
maplibre · Aug 9, 2022 · 8a76227 · 8a76227
1 parent 7bd14bd
commit 8a76227
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 7 deletions.
diff --git a/lib/index.js b/lib/index.js
@@ -499,7 +499,7 @@ MaplibreGeocoder.prototype = {
   },
 
   _showButton: function () {
-    if (this._typeahead.selected) this._clearEl.style.display = "block";
+    if (this._inputEl.value.length > 0) this._clearEl.style.display = "block";
   },
 
   _hideButton: function () {
@@ -514,6 +514,10 @@ MaplibreGeocoder.prototype = {
       this._collapse();
     }
   },
+  // Change events are fire by suggestions library whenever the enter key is pressed or input is blurred
+  // This can sometimes cause strange behavior as this function is called before our own onKeyDown handler and thus
+  //  we cannot depend on some internal values of the suggestion state like `selected` as those will change or before
+  //  our onKeyDown handler.
   _onChange: function () {
     var selected = this._typeahead.selected;
 
@@ -771,22 +775,22 @@ MaplibreGeocoder.prototype = {
 
           if (res.features.length) {
             this._clearEl.style.display = "block";
-            this._eventEmitter.emit("results", res);
 
             var processedResults = this.options.processResults(
               res.features,
               res.suggestions,
               this.options.limit
             );
 
-            this._eventEmitter.emit("processedResults", processedResults);
-
             this._typeahead.update(processedResults);
             if (
               (!this.options.showResultsWhileTyping || isSuggestion) &&
               this.options.showResultMarkers
             )
               this._fitBoundsForMarkers();
+
+            this._eventEmitter.emit("results", res);
+            this._eventEmitter.emit("processedResults", processedResults);
           } else {
             this._clearEl.style.display = "none";
             this._typeahead.selected = null;
@@ -1035,7 +1039,7 @@ MaplibreGeocoder.prototype = {
           bounds.extend(feature.geometry.coordinates);
         });
 
-        this._map.fitBounds(bounds, flyOptions);
+        this._map.fitBounds(bounds.toArray(), flyOptions);
       }
     }
 

diff --git a/test/test.ui.js b/test/test.ui.js
@@ -343,6 +343,26 @@ test("Geocoder#inputControl", function (tt) {
     t.end();
   });
 
+  tt.test("clear button shows up", function (t) {
+    t.plan(1);
+    setup({
+      clearOnBlur: true,
+    });
+
+    geocoder.setInput("testval");
+
+    var wrapper = container.querySelector(".maplibregl-ctrl-geocoder");
+    var hoverEvent = document.createEvent("Event");
+    hoverEvent.initEvent("mouseenter", true, true);
+    wrapper.dispatchEvent(hoverEvent);
+    var clearbutton = container.querySelector(
+      ".maplibregl-ctrl-geocoder--button"
+    );
+    t.equal(clearbutton.style.display, "block");
+
+    t.end();
+  });
+
   tt.test("options.collapsed=true, hover", function (t) {
     t.plan(1);
     setup({
@@ -378,15 +398,17 @@ test("Geocoder#inputControl", function (tt) {
   tt.test(
     "options.showResultsWhileTyping=false, enter key press",
     function (t) {
-      t.plan(2);
+      t.plan(4);
       setup({
+        features: [Features.QUEEN_STREET],
         collapsed: true,
         showResultsWhileTyping: false,
         maplibregl: maplibregl,
       });
 
       var wrapper = container.querySelector(".maplibregl-ctrl-geocoder input");
       var searchMock = sinon.spy(geocoder, "_geocode");
+      var mapFitBoundsMock = sinon.spy(map, "fitBounds");
 
       geocoder.setInput("Paris");
       t.ok(
@@ -398,7 +420,13 @@ test("Geocoder#inputControl", function (tt) {
       geocoder.on(
         "results",
         once(function () {
-          t.pass("results are returned");
+          var boundsArray = mapFitBoundsMock.args[0][0];
+          t.ok(
+            mapFitBoundsMock.calledOnce,
+            "the map#fitBounds method was called when enter was pressed"
+          );
+          t.equals(boundsArray[0].length, 2, "center.lng changed");
+          t.equals(boundsArray[1].length, 2, "center.lat changed");
           t.end();
         })
       );