add length indicator for semicombo fields as well

css/80_app.css

@@ -1717,7 +1717,7 @@ a.hide-toggle {
 
 .form-field-input-multicombo .input-wrap {
     border: 1px solid #ddd;
-    width: 100px;
+    width: 180px;
 }
 .form-field-input-multicombo input {
     border: none;
@@ -2336,10 +2336,10 @@ div.combobox {
     right: 0;
 }
 
-.form-field-input-wrap > input:focus + span.length-indicator-wrap,
-.form-field-input-wrap > textarea:focus + span.length-indicator-wrap,
-.form-field-input-wrap > input:focus + div.combobox-caret + span.length-indicator-wrap,
-.form-field-input-wrap > textarea:focus + div.combobox-caret + span.length-indicator-wrap {
+.form-field-input-wrap input:focus + span.length-indicator-wrap,
+.form-field-input-wrap textarea:focus + span.length-indicator-wrap,
+.form-field-input-wrap input:focus + div.combobox-caret + span.length-indicator-wrap,
+.form-field-input-wrap textarea:focus + div.combobox-caret + span.length-indicator-wrap {
     visibility: visible;
 }
 
@@ -2357,6 +2357,10 @@ div.combobox {
     border-right-color: red;
 }
 
+.tooltip.max-length-warning {
+    z-index: 10;
+}
+
 /* Field Help
 ------------------------------------------------------- */
 .field-help-body {

modules/ui/fields/combo.js

@@ -390,6 +390,8 @@ export function uiFieldCombo(field, context) {
 
             arr = utilArrayUniq(arr);
             t[field.key] = arr.length ? arr.join(';') : undefined;
+
+            _lengthIndicator.update(t[field.key]);
         }
         dispatch.call('change', this, t);
     }
@@ -449,7 +451,13 @@ export function uiFieldCombo(field, context) {
             .call(initCombo, selection)
             .merge(_input);
 
-        _container.call(_lengthIndicator);
+        if (_isSemi) {
+            _inputWrap.call(_lengthIndicator);
+        } else if (_isMulti) {
+            // todo: implement
+        } else {
+            _container.call(_lengthIndicator);
+        }
 
         if (_isNetwork) {
             var extent = combinedEntityExtent();
@@ -461,8 +469,12 @@ export function uiFieldCombo(field, context) {
             .on('change', change)
             .on('blur', change)
             .on('input', function() {
-                const val = utilGetSetValue(_input);
+                let val = utilGetSetValue(_input);
                 updateIcon(val);
+                if (_isSemi && _tags[field.key]) {
+                    // when adding a new value to existing ones
+                    val += ';' + _tags[field.key];
+                }
                 _lengthIndicator.update(val);
             });
 

modules/ui/length_indicator.js

@@ -10,7 +10,7 @@ import { uiPopover } from './popover';
 
 export function uiLengthIndicator(maxChars) {
     var _wrap = d3_select(null);
-    var _tooltip = uiPopover('tooltip')
+    var _tooltip = uiPopover('tooltip max-length-warning')
         .placement('bottom')
         .hasArrow(true)
         .content(() => selection => {