Disable the name field when matching a suggestion preset

(re: #5515)

css/80_app.css

@@ -175,9 +175,22 @@ input[type=email] {
     padding: 5px 10px 5px 20px;
 }
 
+.disabled,
+textarea[disabled],
+input[type=text][disabled],
+input[type=search][disabled],
+input[type=number][disabled],
+input[type=url][disabled],
+input[type=tel][disabled],
+input[type=email][disabled] {
+    color: #777;
+    background-color: #eee;
+    cursor: not-allowed;
+}
+
 textarea:focus,
 input:focus {
-    background-color: #F1F1F1;
+    background-color: #f1f1f1;
 }
 
 input[type="checkbox"],
@@ -195,6 +208,7 @@ input[type="radio"] {
     margin-right: 0;
 }
 
+
 /* remove bottom border radius when combobox is open */
 .combobox + * textarea:focus,
 .combobox + * input:focus {
@@ -2143,7 +2157,6 @@ div.combobox {
 .tag-list {
     padding-top: 10px;
 }
-
 .tag-row {
     width: 100%;
     position: relative;
@@ -2158,7 +2171,7 @@ div.combobox {
 .tag-row.readonly input.key,
 .tag-row.readonly input.value,
 .tag-row.readonly button.remove {
-    color: #777777;
+    color: #777;
     background-color: #eee;
     cursor: not-allowed;
 }

modules/ui/fields/localized.js

@@ -36,6 +36,7 @@ export function uiFieldLocalized(field, context) {
         input = selection.selectAll('.localized-main')
             .data([0]);
 
+        // enter/update
         input = input.enter()
             .append('input')
             .attr('type', 'text')
@@ -45,9 +46,14 @@ export function uiFieldLocalized(field, context) {
             .call(utilNoAuto)
             .merge(input);
 
-        if (field.id === 'name') {
-            var presets = context.presets();
-            var preset = presets.match(_entity, context.graph());
+        var presets = context.presets();
+        var preset = presets.match(_entity, context.graph());
+        var isSuggestion = preset.suggestion;
+
+        if (field.id === 'name' && isSuggestion) {
+            // field.keys = Object.keys(preset.removeTags)
+
+        } else if (field.id === 'name' && !isSuggestion) {
             var isFallback = preset.isFallback();
             var pTag = preset.id.split('/', 2);
             var pKey = pTag[0];
@@ -91,6 +97,7 @@ export function uiFieldLocalized(field, context) {
         }
 
         input
+            .property('disabled', isSuggestion)
             .on('input', change(true))
             .on('blur', change())
             .on('change', change());