fixes around input value for search and tags and tags input cosmetics

assets/styles/configuration.scss

@@ -307,12 +307,20 @@ livechat-tags-input {
     padding: 0;
     margin: var(--tag-padding-vertical) 0;
     max-height: 150px;
-    overflow-y: scroll;
+    overflow-y: auto;
     border-bottom: 1px dashed var(--greyForegroundColor);
-    transition: 0.3s height;
+    transition-property: height, margin;
+    transition-duration: 0.3s;
 
     &.empty {
-      visibility: hidden;
+      height: 0;
+      margin: 0;
+      border: none;
+    }
+
+    @supports (scrollbar-width: auto) {
+      scrollbar-color: var(--greyForegroundColor) transparent;
+      scrollbar-width: thin;
     }
   }
 
@@ -334,6 +342,7 @@ livechat-tags-input {
   .tag-searched {
     width: auto;
     height: 24px;
+    max-width: 150px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -396,6 +405,9 @@ livechat-tags-input {
 
     .tag-name {
       margin-top: 3px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
     }
   }
 

client/common/lib/elements/tags-input.ts

@@ -46,7 +46,7 @@ export class TagsInputElement extends LivechatElement {
   private _searchedTagsIndex: number[] = []
 
   @state()
-  private _isPressingKey: string[] = []
+  private readonly _isPressingKey: string[] = []
 
   @property({ attribute: false })
   public separators?: string[] = ['\n']
@@ -62,7 +62,7 @@ export class TagsInputElement extends LivechatElement {
           unfocused: this._searchedTagsIndex.length
         })}>
           ${repeat(this.value, tag => tag,
-            (tag, index) => html`<li key=${index} class="tag" ${animate({
+            (tag, index) => html`<li key=${index} class="tag" title=${tag} ${animate({
                 keyframeOptions: {
                   duration: this.animDuration,
                   fill: 'both'
@@ -78,7 +78,7 @@ export class TagsInputElement extends LivechatElement {
         </ul>
         <ul id="tags-searched" class=${classMap({ empty: !this._searchedTagsIndex.length })}>
           ${repeat(this._searchedTagsIndex, index => index,
-            (index) => html`<li key=${index} class="tag-searched" ${animate({
+            (index) => html`<li key=${index} class="tag-searched" title=${this.value[index]} ${animate({
                 keyframeOptions: {
                   duration: this.animDuration,
                   fill: 'both'
@@ -145,6 +145,8 @@ export class TagsInputElement extends LivechatElement {
         // no duplicate
         this.value = [...new Set([...this.value, ...values])]
 
+        this._inputValue = target.value
+
         this._updateSearchedTags() // is that necessary ?
 
         this.requestUpdate('value')
@@ -243,7 +245,6 @@ export class TagsInputElement extends LivechatElement {
         e.preventDefault()
         target.value = target.value.slice(0, -1)
         this._handleNewTag(e)
-        return false
       } else {
         this._updateSearchedTags()
       }
@@ -258,6 +259,7 @@ export class TagsInputElement extends LivechatElement {
     if (target) {
       this._addTag(target.value)
       target.value = ''
+      this._inputValue = ''
 
       this._updateSearchedTags()
     }