From fc1f7e4d4660059d4dd05c371d044fd98c144be2 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Tue, 11 Dec 2018 23:25:47 -0500
Subject: [PATCH] Trigger a change event when accepting combo option with
 return, tab (closes #4900, closes #5449)

Some browsers need an explicit `change` event triggered on the input field
when a value has been changed by the combo and accepted by pressing return
or tab.  This was only an issue on combos that aren't part of uiFields,
since the uiFields are all setup to respond to `change`,`input`,`blur` etc.
---
 modules/ui/combobox.js              |  9 ++------
 modules/ui/raw_member_editor.js     |  7 ++++++-
 modules/ui/raw_membership_editor.js | 32 +++++++++++++++++++++--------
 3 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/modules/ui/combobox.js b/modules/ui/combobox.js
index fff2b5443..f6e452d76 100644
--- a/modules/ui/combobox.js
+++ b/modules/ui/combobox.js
@@ -150,10 +150,7 @@ export function uiCombobox(context, klass) {
 
                 case 9:   // ⇥ Tab
                     d3_event.stopPropagation();
-                    container.selectAll('.combobox-option.selected').each(function (d) {
-                        dispatch.call('accept', this, d);
-                    });
-                    hide();
+                    container.selectAll('.combobox-option.selected').each(accept);
                     break;
 
                 case 13:  // ↩ Return
@@ -192,9 +189,7 @@ export function uiCombobox(context, klass) {
                     break;
 
                 case 13:  // ↩ Return
-                    container.selectAll('.combobox-option.selected').each(function (d) {
-                       dispatch.call('accept', this, d);
-                    });
+                    container.selectAll('.combobox-option.selected').each(accept);
                     hide();
                     break;
             }
diff --git a/modules/ui/raw_member_editor.js b/modules/ui/raw_member_editor.js
index 4575c0b86..0df12835f 100644
--- a/modules/ui/raw_member_editor.js
+++ b/modules/ui/raw_member_editor.js
@@ -235,6 +235,7 @@ export function uiRawMemberEditor(context) {
             function bindTypeahead(d) {
                 var row = d3_select(this);
                 var role = row.selectAll('input.member-role');
+                var origValue = role.property('value');
 
                 function sort(value, data) {
                     var sameletter = [];
@@ -260,7 +261,11 @@ export function uiRawMemberEditor(context) {
                         }, function(err, data) {
                             if (!err) callback(sort(role, data));
                         });
-                    }));
+                    })
+                    .on('cancel', function() {
+                        role.property('value', origValue);
+                    })
+                );
             }
 
 
diff --git a/modules/ui/raw_membership_editor.js b/modules/ui/raw_membership_editor.js
index bab4e283e..48de899da 100644
--- a/modules/ui/raw_membership_editor.js
+++ b/modules/ui/raw_membership_editor.js
@@ -177,11 +177,12 @@ export function uiRawMembershipEditor(context) {
                 .each(unbind)
                 .remove();
 
-            var enter = items.enter()
+            // Enter
+            var itemsEnter = items.enter()
                 .append('li')
                 .attr('class', 'member-row member-row-normal form-field');
 
-            enter.each(function(d){
+            itemsEnter.each(function(d){
                 // highlight the relation in the map while hovering on the list item
                 d3_select(this).on('mouseover', function() {
                     utilHighlightEntity(d.relation.id, true, context);
@@ -191,7 +192,7 @@ export function uiRawMembershipEditor(context) {
                 });
             });
 
-            var labelEnter = enter
+            var labelEnter = itemsEnter
                 .append('label')
                 .attr('class', 'form-field-label')
                 .append('span')
@@ -213,7 +214,7 @@ export function uiRawMembershipEditor(context) {
                 .attr('class', 'member-entity-name')
                 .text(function(d) { return utilDisplayName(d.relation); });
 
-            var wrapEnter = enter
+            var wrapEnter = itemsEnter
                 .append('div')
                 .attr('class', 'form-field-input-wrap form-field-input-member');
 
@@ -224,20 +225,28 @@ export function uiRawMembershipEditor(context) {
                 .attr('maxlength', 255)
                 .attr('placeholder', t('inspector.role'))
                 .call(utilNoAuto)
-                .property('value', function(d) { return d.member.role; })
-                .on('change', changeRole);
+                .property('value', function(d) { return d.member.role; });
 
             wrapEnter
                 .append('button')
                 .attr('tabindex', -1)
                 .attr('class', 'remove form-field-button member-delete')
-                .on('click', deleteMembership)
                 .call(svgIcon('#iD-operation-delete'));
 
             if (taginfo) {
                 wrapEnter.each(bindTypeahead);
             }
 
+            // Update
+            items = items
+                .merge(itemsEnter);
+
+            items.selectAll('input.member-role')
+                .on('change', changeRole);
+
+            items.selectAll('button.member-delete')
+                .on('click', deleteMembership);
+
 
             var newMembership = list.selectAll('.member-row-new')
                 .data(_showBlank ? [0] : []);
@@ -289,6 +298,7 @@ export function uiRawMembershipEditor(context) {
             newMembership.selectAll('.member-entity-input')
                 .call(nearbyCombo
                     .on('accept', onAccept)
+                    .on('cancel', function() { delete this.value; })
                 );
 
 
@@ -320,6 +330,7 @@ export function uiRawMembershipEditor(context) {
             function bindTypeahead(d) {
                 var row = d3_select(this);
                 var role = row.selectAll('input.member-role');
+                var origValue = role.property('value');
 
                 function sort(value, data) {
                     var sameletter = [];
@@ -345,7 +356,11 @@ export function uiRawMembershipEditor(context) {
                         }, function(err, data) {
                             if (!err) callback(sort(role, data));
                         });
-                    }));
+                    })
+                    .on('cancel', function() {
+                        role.property('value', origValue);
+                    })
+                );
             }
 
 
@@ -362,6 +377,7 @@ export function uiRawMembershipEditor(context) {
     rawMembershipEditor.entityID = function(_) {
         if (!arguments.length) return _entityID;
         _entityID = _;
+        _showBlank = false;
         return rawMembershipEditor;
     };