From 4c799a19422b5d26d9313501aaf29cfce7056046 Mon Sep 17 00:00:00 2001
From: Blaine Jester <blainesworld@gmail.com>
Date: Tue, 31 Aug 2021 09:40:35 -0700
Subject: [PATCH 1/3] Fix textbox autofocus triggering invalid message

---
 .gitignore             | 1 +
 lib/KTextbox/index.vue | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 5792635ee..b81f07174 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,3 +20,4 @@ docs/jsdocs.js
 
 # IDE
 .idea
+kolibri-design-system.iml
diff --git a/lib/KTextbox/index.vue b/lib/KTextbox/index.vue
index 16ea27381..92cdca77b 100644
--- a/lib/KTextbox/index.vue
+++ b/lib/KTextbox/index.vue
@@ -156,6 +156,7 @@
       return {
         currentText: this.value,
         changedOrFocused: false,
+        focusedOnce: false,
       };
     },
     computed: {
@@ -203,7 +204,10 @@
         /**
          * Emitted with `focus` events
          */
-        this.changedOrFocused = true;
+        if (!this.autofocus || this.focusedOnce) {
+          this.changedOrFocused = true;
+        }
+        this.focusedOnce = true;
         this.$emit('focus', e);
       },
       /**
@@ -212,6 +216,7 @@
        */
       focus() {
         this.changedOrFocused = true;
+        this.focusedOnce = true;
         this.$refs.textbox.$el.querySelector('input').focus();
       },
     },

From 9569ab4961871de9bade7e33a1ef368d1f1489a5 Mon Sep 17 00:00:00 2001
From: Blaine Jester <blainesworld@gmail.com>
Date: Tue, 31 Aug 2021 12:46:50 -0700
Subject: [PATCH 2/3] Add comment and make variable name more descriptive

---
 lib/KTextbox/index.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/lib/KTextbox/index.vue b/lib/KTextbox/index.vue
index 92cdca77b..09ad152ff 100644
--- a/lib/KTextbox/index.vue
+++ b/lib/KTextbox/index.vue
@@ -156,7 +156,7 @@
       return {
         currentText: this.value,
         changedOrFocused: false,
-        focusedOnce: false,
+        hasBeenFocused: false,
       };
     },
     computed: {
@@ -204,10 +204,11 @@
         /**
          * Emitted with `focus` events
          */
-        if (!this.autofocus || this.focusedOnce) {
+        // Skip first focus event if autofocus is enabled
+        if (!this.autofocus || this.hasBeenFocused) {
           this.changedOrFocused = true;
         }
-        this.focusedOnce = true;
+        this.hasBeenFocused = true;
         this.$emit('focus', e);
       },
       /**
@@ -216,7 +217,7 @@
        */
       focus() {
         this.changedOrFocused = true;
-        this.focusedOnce = true;
+        this.hasBeenFocused = true;
         this.$refs.textbox.$el.querySelector('input').focus();
       },
     },

From d502f7a877179e50964930c598e53a8f25e76203 Mon Sep 17 00:00:00 2001
From: Blaine Jester <blainesworld@gmail.com>
Date: Tue, 31 Aug 2021 13:51:17 -0700
Subject: [PATCH 3/3] Fix placeholder for error feedback text

---
 lib/keen/UiTextbox.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/keen/UiTextbox.vue b/lib/keen/UiTextbox.vue
index f09af7ede..0c159af5c 100644
--- a/lib/keen/UiTextbox.vue
+++ b/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() {