From 78e141c89621b56c1ded86a3a29e80b316dc5ce2 Mon Sep 17 00:00:00 2001
From: Chris Masselli <chris@cognitoforms.com>
Date: Wed, 16 Feb 2022 12:49:44 -0500
Subject: [PATCH 1/2] Move input inside tag container so it will stay inline

---
 packages/select/src/select.vue | 33 +++++++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
index 9b577f6b9b..3c00cb2055 100644
--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@@ -42,9 +42,39 @@
           disable-transitions>
           <span class="el-select__tags-text">{{ item.currentLabel }}</span>
         </el-tag>
+        <input
+          key="input"
+          type="text"
+          class="el-select__input"
+          :class="[selectSize ? `is-${ selectSize }` : '']"
+          :disabled="selectDisabled"
+          :autocomplete="autoComplete || autocomplete"
+          :aria-controls="id ? `${id}-listbox` : null"
+          role="combobox"
+          aria-haspopup="listbox"
+          :aria-owns="id ? `${id}-listbox` : null"
+          :aria-expanded="visible ? 'true' : 'false'"	
+          @focus="handleFocus"
+          @blur="softFocus = false"
+          @keyup="managePlaceholder"
+          @keydown="resetInputState"
+          @keydown.down.prevent="navigateOptions('next')"
+          @keydown.up.prevent="navigateOptions('prev')"
+          @keydown.enter.prevent="selectOption"
+          @keydown.esc.stop.prevent="visible = false"
+          @keydown.delete="deletePrevTag"
+          @keydown.tab="handleTabKey"
+          @compositionstart="handleComposition"
+          @compositionupdate="handleComposition"
+          @compositionend="handleComposition"
+          v-model="query"
+          @input="debouncedQueryChange"
+          v-if="filterable"
+          :style="{ 'flex-grow': '1', width: selected.length > 0 ? (query.length > 0 ? query.length + 2 + 'ch':'2ch' ) : '100%', 'max-width': '100%' }"
+          ref="input">
       </transition-group>
-
       <input
+        v-else-if="filterable"
         type="text"
         class="el-select__input"
         :class="[selectSize ? `is-${ selectSize }` : '']"
@@ -70,7 +100,6 @@
         @compositionend="handleComposition"
         v-model="query"
         @input="debouncedQueryChange"
-        v-if="filterable"
         :style="{ 'flex-grow': '1', width: inputLength / (inputWidth - 32) + '%', 'max-width': inputWidth - 42 + 'px' }"
         ref="input">
     </div>

From e95589fb16b5cf85adf5bd34d2355d1b273e38a0 Mon Sep 17 00:00:00 2001
From: Chris Masselli <chris@cognitoforms.com>
Date: Wed, 16 Feb 2022 14:26:38 -0500
Subject: [PATCH 2/2] Move width calc for multi-select into computed,
 multiSelectInputWidth

---
 packages/select/src/select.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
index 3c00cb2055..3d526256b1 100644
--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@@ -70,7 +70,7 @@
           v-model="query"
           @input="debouncedQueryChange"
           v-if="filterable"
-          :style="{ 'flex-grow': '1', width: selected.length > 0 ? (query.length > 0 ? query.length + 2 + 'ch':'2ch' ) : '100%', 'max-width': '100%' }"
+          :style="{ 'flex-grow': '1', width: multiSelectInputWidth, 'max-width': '100%' }"
           ref="input">
       </transition-group>
       <input
@@ -287,6 +287,14 @@
 
       hoveredOption() {
         return this.options[this.hoverIndex];
+      },
+
+      multiSelectInputWidth() {
+        if (this.selected.length > 0) {
+          return this.query.length + 2 + 'ch';
+        } else {
+          return '100%';
+        }
       }
     },