Fixed a focusing issue

Adding .active class to the wrapper element when input field is focused
voerro · Mar 1, 2020 · 601d442 · 601d442
1 parent e1cd92c
commit 601d442
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -269,18 +269,33 @@ wrapper-class | tags-input-wrapper-default | Outer appearance of the input - a w
 
 When search results are displayed underneath the input, use the `arrow down` and `arrow up` keys on the keyboard to move the selection. Press `Enter` to select a tag. Press `Esc` to discard the search results and then `Enter` to add a new tag the way you've typed it.
 
-## Updating From Older Versions
+## Breaking Changes
 
-#### Older versions up to v1.5.0 -> v1.5.1
+#### v1.0.0 ... v1.5.0 -> v1.5.1
 
 See the `v1` branch for details.
 
 #### v1.5.1 and above -> v2.*
 
-A pretty serious bug (#53) was fixed in `v2.0.0`. The data format for the `existing-tags` prop and the `v-model` directive has been changed. You can find the new format in this documentation, see above.
+A pretty serious bug ([#53](../../issues/53)) was fixed in `v2.0.0`. The data format for the `existing-tags` prop and the `v-model` directive has been changed. You can find the new format in this documentation, see above.
 
 ## Changelog
 
+#### v.2.2.0
+
+- New option: `hide-input-on-limit`
+- New option: `typeahead-show-on-focus`. It is enabled by default and will make the typeahead (badges or dropdown) visible whenever the input field is focused and if there are any tags suggestions.
+- Adding `active` class to the wrapper element when the input field is focused. If you're using the default (provided) `style.css` file, note that your tags input will now get a "glow" around it when focused.
+
+#### v.2.1.0
+
+- New option: `typeahead-always-show`
+- New option: `typeahead-hide-discard`
+- New option: `add-tags-on-space`
+- New event: `change`
+- "Discard Search Results" string (option text) is now customizable 
+- Fixed a minor bug with removing tags on backspace press
+
 #### v.2.0.2
 
 - Fix: [#43](../../issues/43)

diff --git a/dist/style.css b/dist/style.css
@@ -29,6 +29,12 @@
     border-color: #dbdbdb;
 }
 
+.tags-input-wrapper-default.active {
+    border: 1px solid #8bbafe;
+    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
+    outline: 0 none;
+}
+
 /* The tag badges & the remove icon */
 .tags-input span {
     margin-right: 0.3rem;

diff --git a/src/VoerroTagsInput.vue b/src/VoerroTagsInput.vue
@@ -1,6 +1,9 @@
 <template>
     <div class="tags-input-root" style="position: relative;">
-        <div :class="wrapperClass + ' tags-input'">
+        <div :class="{
+            [wrapperClass + ' tags-input']: true,
+            'active': isActive,
+        }">
             <span class="tags-input-badge tags-input-badge-pill tags-input-badge-selected-default"
                 v-for="(tag, index) in tags"
                 :key="index"
@@ -37,7 +40,7 @@
         <div v-show="searchResults.length">
             <p v-if="typeaheadStyle === 'badges'" :class="`typeahead-${typeaheadStyle}`">
                 <span v-if="!typeaheadHideDiscard" class="tags-input-badge typeahead-hide-btn tags-input-typeahead-item-default"
-                    @click.prevent="clearSearchResults"
+                    @click.prevent="clearSearchResults(true)"
                     v-text="discardSearchText"></span>
 
                 <span v-for="(tag, index) in searchResults"
@@ -54,7 +57,7 @@
 
             <ul v-else-if="typeaheadStyle === 'dropdown'" :class="`typeahead-${typeaheadStyle}`">
                 <li v-if="!typeaheadHideDiscard" class="tags-input-typeahead-item-default typeahead-hide-btn"
-                    @click.prevent="clearSearchResults"
+                    @click.prevent="clearSearchResults(true)"
                     v-text="discardSearchText"></li>
 
                 <li v-for="(tag, index) in searchResults"
@@ -219,6 +222,8 @@ export default {
             searchSelection: 0,
 
             selectedTag: -1,
+
+            isActive: false,
         };
     },
 
@@ -554,7 +559,7 @@ export default {
          * 
          * @reutrns void
          */
-        clearSearchResults() {
+        clearSearchResults(returnFocus = false) {
             this.searchResults = [];
             this.searchSelection = 0;
 
@@ -564,7 +569,9 @@ export default {
                 });
             }
 
-            this.$refs['taginput'].focus();
+            if (returnFocus) {
+                this.$refs['taginput'].focus();
+            }
         },
 
         /**
@@ -678,7 +685,9 @@ export default {
          * @returns void
          */
         onFocus(e) {
-            this.$emit('focus', e);  
+            this.$emit('focus', e);
+
+            this.isActive = true;
         },
 
         /**
@@ -690,6 +699,8 @@ export default {
         onClick(e) {
             this.$emit('click', e);
 
+            this.isActive = true;
+
             this.searchTag();
         },
 
@@ -712,6 +723,8 @@ export default {
             } else {
                 this.searchTag();
             }
+
+            this.isActive = false;
         },
     }
 }