From 59b10b797458de27fbb1f141c3b0aef69c3ebf24 Mon Sep 17 00:00:00 2001
From: Martin Raifer <martin@raifer.tech>
Date: Fri, 25 Nov 2022 18:52:13 +0100
Subject: [PATCH] add length indicator for semicombo fields as well

---
 css/80_app.css                 | 14 +++++++++-----
 modules/ui/fields/combo.js     | 16 ++++++++++++++--
 modules/ui/length_indicator.js |  2 +-
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 49fba507d..3c08bd04b 100644
--- a/css/80_app.css
+++ b/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 {
diff --git a/modules/ui/fields/combo.js b/modules/ui/fields/combo.js
index 27dc5a965..568cbb5d2 100644
--- a/modules/ui/fields/combo.js
+++ b/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);
             });
 
diff --git a/modules/ui/length_indicator.js b/modules/ui/length_indicator.js
index 765e24f28..345134a9b 100644
--- a/modules/ui/length_indicator.js
+++ b/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 => {