Merge pull request #256 from bjester/textbox-autofocus-delay-invalid

Fix textbox autofocus triggering invalid message

.gitignore

@@ -20,3 +20,4 @@ docs/jsdocs.js
 
 # IDE
 .idea
+kolibri-design-system.iml

lib/KTextbox/index.vue

@@ -156,6 +156,7 @@
       return {
         currentText: this.value,
         changedOrFocused: false,
+        hasBeenFocused: false,
       };
     },
     computed: {
@@ -203,7 +204,11 @@
         /**
          * Emitted with `focus` events
          */
-        this.changedOrFocused = true;
+        // Skip first focus event if autofocus is enabled
+        if (!this.autofocus || this.hasBeenFocused) {
+          this.changedOrFocused = true;
+        }
+        this.hasBeenFocused = true;
         this.$emit('focus', e);
       },
       /**
@@ -212,6 +217,7 @@
        */
       focus() {
         this.changedOrFocused = true;
+        this.hasBeenFocused = true;
         this.$refs.textbox.$el.querySelector('input').focus();
       },
     },

lib/keen/UiTextbox.vue

@@ -90,7 +90,7 @@
         </div>
       </label>
 
-      <div v-if="hasFeedback || maxlength" class="ui-textbox-feedback">
+      <div v-if="showHelp || hasErrorFeedback || maxlength" class="ui-textbox-feedback">
         <div v-if="showError" class="ui-textbox-feedback-text" style="{ color: $themeTokens.error }">
           <slot name="error">
             {{ error }}
@@ -104,7 +104,7 @@
         </div>
 
         <!-- Placeholder to keep the text height spacing in place even when
-          not showing any errors -->
+             not showing any errors -->
         <div v-else class="ui-textbox-feedback-text">
           &nbsp;
         </div>
@@ -282,12 +282,12 @@
         return this.value ? this.value.length : 0;
       },
 
-      hasFeedback() {
-        return this.showError || this.showHelp;
+      hasErrorFeedback() {
+        return Boolean(this.error) || Boolean(this.$slots.error);
       },
 
       showError() {
-        return this.invalid && (Boolean(this.error) || Boolean(this.$slots.error));
+        return this.invalid && this.hasErrorFeedback;
       },
 
       showHelp() {