From ec51ebb0265a79984b0954ff67a54e2a6f5ce2c6 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Tue, 11 Dec 2018 21:54:25 -0500
Subject: [PATCH] Fix flexbox of raw membership editor new row (closes #5589)

---
 css/80_app.css                      |  6 ++--
 data/core.yaml                      |  1 +
 dist/locales/en.json                |  1 +
 modules/ui/raw_membership_editor.js | 50 ++++++++++++++++++++---------
 4 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 57f11fa64..3927ee76e 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -2176,6 +2176,7 @@ div.combobox {
     background: rgba(0,0,0,.5);
     border-radius: 0 0 4px 4px;
 }
+.raw-tag-editor .add-tag:focus,
 .raw-tag-editor .add-tag:hover {
     background: rgba(0,0,0,.8);
 }
@@ -2256,9 +2257,9 @@ div.combobox {
 }
 
 .member-row-new .member-entity-input {
+    flex: 1 1 100%;
     border-radius: 4px 4px 0 0;
-    border: 1px solid #ccc;
-    flex-basis: 100%;
+    border: 0;
 }
 
 .add-relation {
@@ -2268,6 +2269,7 @@ div.combobox {
     border-radius: 4px;
     margin-top: 10px;
 }
+.add-relation:focus,
 .add-relation:hover {
     background: rgba(0,0,0,.8);
 }
diff --git a/data/core.yaml b/data/core.yaml
index 50e7a3031..2f5214e3b 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -412,6 +412,7 @@ en:
     all_members: All members
     all_relations: All relations
     new_relation: New relation...
+    choose_relation: Choose a parent relation
     role: Role
     choose: Select feature type
     results: "{n} results for {search}"
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 4ba3ffba4..3ae83718c 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -506,6 +506,7 @@
             "all_members": "All members",
             "all_relations": "All relations",
             "new_relation": "New relation...",
+            "choose_relation": "Choose a parent relation",
             "role": "Role",
             "choose": "Select feature type",
             "results": "{n} results for {search}",
diff --git a/modules/ui/raw_membership_editor.js b/modules/ui/raw_membership_editor.js
index 55f8ffd6e..bab4e283e 100644
--- a/modules/ui/raw_membership_editor.js
+++ b/modules/ui/raw_membership_editor.js
@@ -45,6 +45,8 @@ export function uiRawMembershipEditor(context) {
 
     function changeRole(d) {
         var role = d3_select(this).property('value');
+        if (d === 0) return;   // called on newrow (shoudn't happen)
+
         context.perform(
             actionChangeMember(d.relation.id, _extend({}, d.member, { role: role }), d.index),
             t('operations.change_role.annotation')
@@ -53,6 +55,7 @@ export function uiRawMembershipEditor(context) {
 
 
     function addMembership(d, role) {
+        this.blur();           // avoid keeping focus on the button
         _showBlank = false;
 
         var member = { id: _entityID, type: context.entity(_entityID).type, role: role };
@@ -77,6 +80,9 @@ export function uiRawMembershipEditor(context) {
 
 
     function deleteMembership(d) {
+        this.blur();           // avoid keeping focus on the button
+        if (d === 0) return;   // called on newrow (shoudn't happen)
+
         context.perform(
             actionDeleteMember(d.relation.id, d.index),
             t('operations.delete_member.annotation')
@@ -233,42 +239,54 @@ export function uiRawMembershipEditor(context) {
             }
 
 
-            var newrow = list.selectAll('.member-row-new')
+            var newMembership = list.selectAll('.member-row-new')
                 .data(_showBlank ? [0] : []);
 
-            newrow.exit()
+            // Exit
+            newMembership.exit()
                 .remove();
 
-            enter = newrow.enter()
+            // Enter
+            var newMembershipEnter = newMembership.enter()
                 .append('li')
                 .attr('class', 'member-row member-row-new form-field');
 
-            enter
+            newMembershipEnter
+                .append('label')
+                .attr('class', 'form-field-label')
                 .append('input')
+                .attr('placeholder', t('inspector.choose_relation'))
                 .attr('type', 'text')
                 .attr('class', 'member-entity-input')
                 .call(utilNoAuto);
 
-            enter
+            var newWrapEnter = newMembershipEnter
+                .append('div')
+                .attr('class', 'form-field-input-wrap form-field-input-member');
+
+            newWrapEnter
                 .append('input')
                 .attr('class', 'member-role')
                 .property('type', 'text')
                 .attr('maxlength', 255)
                 .attr('placeholder', t('inspector.role'))
-                .call(utilNoAuto)
-                .on('change', changeRole);
+                .call(utilNoAuto);
 
-            enter
+            newWrapEnter
                 .append('button')
                 .attr('tabindex', -1)
                 .attr('class', 'remove form-field-button member-delete')
-                .on('click', deleteMembership)
+                .on('click', function() {
+                    list.selectAll('.member-row-new')
+                        .remove();
+                })
                 .call(svgIcon('#iD-operation-delete'));
 
-            newrow = newrow
-                .merge(enter);
+            // Update
+            newMembership = newMembership
+                .merge(newMembershipEnter);
 
-            newrow.selectAll('.member-entity-input')
+            newMembership.selectAll('.member-entity-input')
                 .call(nearbyCombo
                     .on('accept', onAccept)
                 );
@@ -277,12 +295,14 @@ export function uiRawMembershipEditor(context) {
             var addrel = selection.selectAll('.add-relation')
                 .data([0]);
 
-            addrel = addrel.enter()
+            // Enter
+            var addrelEnter = addrel.enter()
                 .append('button')
-                .attr('class', 'add-relation')
-                .merge(addrel);
+                .attr('class', 'add-relation');
 
+            // Update
             addrel
+                .merge(addrelEnter)
                 .call(svgIcon('#iD-icon-plus', 'light'))
                 .on('click', function() {
                     _showBlank = true;