display text in input on highlighting dropdown items

pelias · Mar 9, 2017 · 311355c · 311355c
1 parent 3d40c7f
commit 311355c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - **Added customizable text strings!** By popular request, text strings used in the geocoder control can now be customized to your liking. This also enables localisation of the plugin to a different language. For example, [check out this geocoder in Korean](https://mapzen.github.io/leaflet-geocoder/examples/custom-strings.html). (with @hanbyul-here, [#120](https://github.com/mapzen/leaflet-geocoder/issues/120))
 - **Deprecated!** Now that `textStrings` option is here, the `title` option is deprecated. It will still work as an alias to `textStrings.RESET_TITLE_ATTRIBUTE`, but logs a warning to the console if you use it. The preferred way is to set the `textStrings.RESET_TITLE_ATTRIBUTE` property directly. (Note: the `placeholder` option will not be deprecated, since it is used more often. Similarly, it now aliases to `textStrings.INPUT_PLACEHOLDER`.)
+- Pressing up / down through a list of results now populates the input with that result's label, which is more in line with user expectations for an autocomplete dropdown (for extra web nerdiness, read the [WAI-ARIA Authoring Practices 1.1 Working Draft 17 March 2016 section on auto complete design patterns](https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/#autocomplete). [#110](https://github.com/mapzen/leaflet-geocoder/issues/110)
 - Added an example to show how you can control the map’s zoom level when a result is selected. [#62](https://github.com/mapzen/leaflet-geocoder/issues/62) (and thanks to @skorasaurus for the help)
 - Added an example to show how you can show region boundary geometry with a secondary request to [Who’s on First](https://whosonfirst.mapzen.com) [#86](https://github.com/mapzen/leaflet-geocoder/issues/86).
 - Improved compatibility with Leaflet v1's `Evented` object. [#150](https://github.com/mapzen/leaflet-geocoder/issues/150)

diff --git a/spec/suites/InterfaceSpec.js b/spec/suites/InterfaceSpec.js
@@ -148,6 +148,11 @@ describe('Interface', function () {
       expect(document.querySelector('.leaflet-pelias-selected')).to.be(document.querySelectorAll('.leaflet-pelias-result')[1]);
     });
 
+    it('puts the feature label in the input when the item is highlighted', function () {
+      happen.keydown(geocoder._input, { keyCode: 40 });
+      expect(document.querySelector('.leaflet-pelias-selected').textContent).to.be(geocoder._input.value);
+    });
+
     it('highlights the correct result after a bunch of up/down presses', function () {
       happen.keydown(geocoder._input, { keyCode: 38 });
       happen.keydown(geocoder._input, { keyCode: 38 });

diff --git a/src/leaflet-geocoder-mapzen.js b/src/leaflet-geocoder-mapzen.js
@@ -777,28 +777,27 @@
           var selected = this._results.querySelectorAll('.leaflet-pelias-selected')[0];
           var selectedPosition;
           var self = this;
-          var panToPoint = function (shouldPan) {
-            var _selected = self._results.querySelectorAll('.leaflet-pelias-selected')[0];
-            if (_selected && shouldPan) {
-              if (_selected.feature.bbox && !this.options.forcePointMarkers) {
+
+          var panToPoint = function (selected, options) {
+            if (selected && options.panToPoint) {
+              if (selected.feature.bbox && !options.forcePointMarkers) {
                 self.removeMarkers();
-                self.fitBoundingBox(_selected.feature.bbox);
+                self.fitBoundingBox(selected.feature.bbox);
               } else {
                 self.removeMarkers();
-                self.showMarker(_selected.innerHTML, L.GeoJSON.coordsToLatLng(_selected.feature.geometry.coordinates));
+                self.showMarker(selected.innerHTML, L.GeoJSON.coordsToLatLng(selected.feature.geometry.coordinates));
               }
             }
           };
 
-          var scrollSelectedResultIntoView = function () {
-            var _selected = self._results.querySelectorAll('.leaflet-pelias-selected')[0];
-            var _selectedRect = _selected.getBoundingClientRect();
-            var _resultsRect = self._results.getBoundingClientRect();
+          var scrollSelectedResultIntoView = function (selected) {
+            var selectedRect = selected.getBoundingClientRect();
+            var resultsRect = self._results.getBoundingClientRect();
             // Is the selected element not visible?
-            if (_selectedRect.bottom > _resultsRect.bottom) {
-              self._results.scrollTop = _selected.offsetTop + _selected.offsetHeight - self._results.offsetHeight;
-            } else if (_selectedRect.top < _resultsRect.top) {
-              self._results.scrollTop = _selected.offsetTop;
+            if (selectedRect.bottom > resultsRect.bottom) {
+              self._results.scrollTop = selected.offsetTop + selected.offsetHeight - self._results.offsetHeight;
+            } else if (selectedRect.top < resultsRect.top) {
+              self._results.scrollTop = selected.offsetTop;
             }
           };
 
@@ -837,8 +836,9 @@
               var highlighted = (selected && previousItem) ? previousItem : list[list.length - 1]; // eslint-disable-line no-redeclare
 
               L.DomUtil.addClass(highlighted, 'leaflet-pelias-selected');
-              scrollSelectedResultIntoView();
-              panToPoint(this.options.panToPoint);
+              scrollSelectedResultIntoView(highlighted);
+              panToPoint(highlighted, this.options);
+              this._input.value = highlighted.textContent;
               this.fire('highlight', {
                 originalEvent: e,
                 latlng: L.GeoJSON.coordsToLatLng(highlighted.feature.geometry.coordinates),
@@ -862,8 +862,9 @@
               var highlighted = (selected && nextItem) ? nextItem : list[0]; // eslint-disable-line no-redeclare
 
               L.DomUtil.addClass(highlighted, 'leaflet-pelias-selected');
-              scrollSelectedResultIntoView();
-              panToPoint(this.options.panToPoint);
+              scrollSelectedResultIntoView(highlighted);
+              panToPoint(highlighted, this.options);
+              this._input.value = highlighted.textContent;
               this.fire('highlight', {
                 originalEvent: e,
                 latlng: L.GeoJSON.coordsToLatLng(highlighted.feature.geometry.coordinates),