Merge pull request #10002 from k-yle/9876-multiple-values-empty

show empty tag values in multi-selections

CHANGELOG.md

@@ -41,6 +41,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 #### :sparkles: Usability & Accessibility
 * Show the color of (route) relations in the form of small colored circles in relation membership section and feature search results ([#9424])
 * Hide tag suggestions for tags like `name_1` in raw tag editor autocomplete ([#9422])
+* Show `(empty)` as a tag value option in the raw tag editor when a multi selections contains at least one feature which does not have the particular tag ([#9876], thanks [@k-yle])
 #### :scissors: Operations
 #### :camera: Street-Level
 #### :white_check_mark: Validation
@@ -55,6 +56,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 
 [#9424]: https://github.com/openstreetmap/iD/pull/9424
 [#9422]: https://github.com/openstreetmap/iD/issues/9422
+[#9876]: https://github.com/openstreetmap/iD/issues/9876
 [#9983]: https://github.com/openstreetmap/iD/issues/9983
 [#9992]: https://github.com/openstreetmap/iD/issues/9992
 [@ramith-kulal]: https://github.com/ramith-kulal

css/80_app.css

@@ -2406,6 +2406,11 @@ div.combobox {
     color: #333;
 }
 
+.combobox .combobox-option.virtual-option {
+    font-style: italic;
+    color: #333;
+}
+
 .form-field-input-wrap {
     position: relative;
 }

data/core.yaml

@@ -725,6 +725,7 @@ en:
     wiki_reference: View documentation
     wiki_en_reference: View documentation in English
     key_value: "key=value"
+    empty: (empty)
     multiple_values: Multiple Values
     multiple_types: Multiple Types
     unshared_value_tooltip: not shared by all features

modules/ui/sections/raw_tag_editor.js

@@ -411,7 +411,16 @@ export function uiSectionRawTagEditor(id, context) {
                 .fetcher(function(value, callback) {
                     var keyString = utilGetSetValue(key);
                     if (!_tags[keyString]) return;
-                    var data = _tags[keyString].filter(Boolean).map(function(tagValue) {
+                    var data = _tags[keyString].map(function(tagValue) {
+                        if (!tagValue) {
+                            return {
+                                value: ' ',
+                                title: t('inspector.empty'),
+                                display: selection => selection.text('')
+                                    .classed('virtual-option', true)
+                                    .call(t.append('inspector.empty'))
+                            };
+                        }
                         return {
                             value: tagValue,
                             title: tagValue
@@ -549,6 +558,9 @@ export function uiSectionRawTagEditor(id, context) {
         // exit if this is a multiselection and no value was entered
         if (typeof d.value !== 'string' && !this.value) return;
 
+        // remove tag if it is now empty
+        if (!this.value.trim()) return removeTag(d3_event, d);
+
         // exit if we are currently about to delete this row anyway - #6366
         if (_pendingChange && _pendingChange.hasOwnProperty(d.key) && _pendingChange[d.key] === undefined) return;