Merge pull request #5636 from openstreetmap/5596

open combobox if anywhere on box clicked...
openstreetmap · Dec 20, 2018 · e2c0f5e · e2c0f5e
2 parents 90e3cd8 + e3407d4
commit e2c0f5e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 20 deletions.
diff --git a/css/80_app.css b/css/80_app.css
@@ -1906,6 +1906,7 @@ div.combobox {
     margin-left: -30px;
     vertical-align: top;
     cursor: pointer;
+    pointer-events: none;
 }
 [dir='rtl'] .combobox-caret {
   margin-left: 0;

diff --git a/modules/ui/combobox.js b/modules/ui/combobox.js
@@ -49,9 +49,9 @@ export function uiCombobox(context, klass) {
             .on('keydown.typeahead', keydown)
             .on('keyup.typeahead', keyup)
             .on('input.typeahead', change)
+            .on('mousedown', mousedown)
             .each(addCaret);
 
-
         function addCaret() {
             var parent = this.parentNode;
             var sibling = this.nextSibling;
@@ -65,22 +65,6 @@ export function uiCombobox(context, klass) {
                 .attr('class', 'combobox-caret')
                 .merge(caret);
 
-            caret
-                .on('mousedown', function () {
-                    // prevent the form element from blurring. it blurs on mousedown
-                    d3_event.stopPropagation();
-                    d3_event.preventDefault();
-                    var combo = container.selectAll('.combobox');
-                    if (combo.empty()) {
-                        input.node().focus();
-                        fetch('', function() {
-                            show();
-                            render();
-                        });
-                    } else {
-                        hide();
-                    }
-                });
         }
 
 
@@ -205,6 +189,22 @@ export function uiCombobox(context, klass) {
         }
 
 
+        function mousedown() {
+            // prevent the form element from blurring. it blurs on mousedown
+            d3_event.stopPropagation();
+            d3_event.preventDefault();
+            var combo = container.selectAll('.combobox');
+            if (combo.empty()) {
+                input.node().focus();
+                fetch('', function() {
+                    show();
+                    render();
+                });
+            } else {
+                hide();
+            }
+        }
+
         function nav(dir) {
             if (!_suggestions.length) return;
 

diff --git a/test/spec/ui/combobox.js b/test/spec/ui/combobox.js
@@ -90,7 +90,7 @@ describe('uiCombobox', function() {
 
     it('adds combobox under container', function() {
         input.call(combobox.data(data));
-        body.selectAll('.combobox-caret').dispatch('mousedown');
+        body.selectAll('.combobox-input').dispatch('mousedown');
         expect(d3.select('.id-container > div.combobox').nodes().length).to.equal(1);
     });
 
@@ -106,14 +106,14 @@ describe('uiCombobox', function() {
 
     it('shows all entries when clicking on the caret', function() {
         input.property('value', 'foobar').call(combobox.data(data));
-        body.selectAll('.combobox-caret').dispatch('mousedown');
+        body.selectAll('.combobox-input').dispatch('mousedown');
         expect(body.selectAll('.combobox-option').size()).to.equal(5);
         expect(body.selectAll('.combobox-option').text()).to.equal('foobar');
     });
 
     it('is initially shown with no selection', function() {
         input.call(combobox.data(data));
-        body.selectAll('.combobox-caret').dispatch('mousedown');
+        body.selectAll('.combobox-input').dispatch('mousedown');
         expect(body.selectAll('.combobox-option.selected').size()).to.equal(0);
     });