From 7b1f9d4d590864431cf17b39495c013188073989 Mon Sep 17 00:00:00 2001
From: Adam DeHaven <adam.dehaven@konghq.com>
Date: Wed, 20 Apr 2022 11:55:26 -0400
Subject: [PATCH] fix(kselect): display

---
 TEMP-MIGRATION-CHANGELOG.md            |  2 ++
 src/components/KCard/KCard.vue         |  4 ++--
 src/components/KInput/KInput.vue       |  2 +-
 src/components/KMenu/KMenuItem.vue     |  2 +-
 src/components/KSelect/KSelect.vue     | 20 +++++++++++++-------
 src/components/KSelect/KSelectItem.vue |  1 +
 src/components/KTable/KTable.vue       |  2 +-
 src/components/KTextArea/KTextArea.vue |  2 +-
 8 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/TEMP-MIGRATION-CHANGELOG.md b/TEMP-MIGRATION-CHANGELOG.md
index 6b2e2a8442..4ca5486fd8 100644
--- a/TEMP-MIGRATION-CHANGELOG.md
+++ b/TEMP-MIGRATION-CHANGELOG.md
@@ -110,6 +110,8 @@ export default defineConfig({
 
 - Added new CSS theming variables
 
+    | Variable | Purpose
+    |:-------- |:-------
     | `--KPaginationColor`| KPagination button text color
     | `--KPaginationBackgroundColor`| KPagination button background color
     | `--KPaginationBorderColor`| KPagination button border color
diff --git a/src/components/KCard/KCard.vue b/src/components/KCard/KCard.vue
index 34468d2d5d..b85f57f39c 100644
--- a/src/components/KCard/KCard.vue
+++ b/src/components/KCard/KCard.vue
@@ -136,8 +136,8 @@ export default defineComponent({
   },
 
   setup(props, { slots }) {
-    const titleId = computed((): string => props.testMode ? uuidv1() : 'test-title-id-1234')
-    const contentId = computed((): string => props.testMode ? uuidv1() : 'test-content-id-1234')
+    const titleId = computed((): string => props.testMode ? 'test-title-id-1234' : uuidv1())
+    const contentId = computed((): string => props.testMode ? 'test-content-id-1234' : uuidv1())
     const useStatusHatLayout = computed((): boolean => {
       return !!(props.status || !!slots.statusHat)
     })
diff --git a/src/components/KInput/KInput.vue b/src/components/KInput/KInput.vue
index b8403b3775..045c5498dd 100644
--- a/src/components/KInput/KInput.vue
+++ b/src/components/KInput/KInput.vue
@@ -152,7 +152,7 @@ export default defineComponent({
     const isFocused = ref(false)
     const isHovered = ref(false)
     const isDisabled = computed((): boolean => !!attrs?.disabled)
-    const inputId = computed((): string => attrs.id ? String(attrs.id) : !props.testMode ? uuidv1() : 'test-input-id-1234')
+    const inputId = computed((): string => attrs.id ? String(attrs.id) : props.testMode ? 'test-input-id-1234' : uuidv1())
 
     const modifiedAttrs = computed(() => {
       const $attrs = { ...attrs }
diff --git a/src/components/KMenu/KMenuItem.vue b/src/components/KMenu/KMenuItem.vue
index 631adcd355..cac32951e4 100644
--- a/src/components/KMenu/KMenuItem.vue
+++ b/src/components/KMenu/KMenuItem.vue
@@ -98,7 +98,7 @@ export default defineComponent({
   emits: ['clicked'],
   setup(props, { emit, slots }) {
     const isOpen = ref(false)
-    const menuItemId = computed((): string => !props.testMode ? uuidv1() : 'test-menuitem-id-1234')
+    const menuItemId = computed((): string => props.testMode ? 'test-menuitem-id-1234' : uuidv1())
 
     const toggleMenuItem = (): void => {
       if (props.expandable) {
diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue
index 1153915558..d04c449ae5 100644
--- a/src/components/KSelect/KSelect.vue
+++ b/src/components/KSelect/KSelect.vue
@@ -73,7 +73,7 @@
               :is-rounded="false"
               v-bind="$attrs"
               appearance="btn-link"
-              @keyup="triggerFocus(isToggled.value)"
+              @keyup="evt => triggerFocus(evt, isToggled)"
             >
               {{ selectButtonText }}
             </KButton>
@@ -101,7 +101,7 @@
               class="k-select-input"
               autocomplete="off"
               autocapitalize="off"
-              @keyup="triggerFocus(isToggled.value)"
+              @keyup="evt => triggerFocus(evt, isToggled)"
             />
           </div>
           <template #content>
@@ -250,9 +250,9 @@ export default defineComponent({
   setup(props, { attrs, emit }) {
     const filterStr = ref('')
     const selectedItem = ref<SelectItem|null>(null)
-    const selectId = computed((): string => props.testMode ? uuidv1() : 'test-select-id-1234')
-    const selectInputId = computed((): string => props.testMode ? uuidv1() : 'test-select-input-id-1234')
-    const selectTextId = computed((): string => props.testMode ? uuidv1() : 'test-select-text-id-1234')
+    const selectId = computed((): string => props.testMode ? 'test-select-id-1234' : uuidv1())
+    const selectInputId = computed((): string => props.testMode ? 'test-select-input-id-1234' : uuidv1())
+    const selectTextId = computed((): string => props.testMode ? 'test-select-text-id-1234' : uuidv1())
     const selectItems: Ref<SelectItem[]> = ref([])
 
     const widthValue = computed(() => {
@@ -341,9 +341,15 @@ export default defineComponent({
       emit('update:modelValue', null)
     }
 
-    const triggerFocus = (isToggled: boolean):void => {
+    const triggerFocus = (evt: any, isToggled: Ref<boolean>):void => {
+      // Ignore `esc` key
+      if (evt.keyCode === 27) {
+        isToggled.value = false
+        return
+      }
+
       const inputElem = document.getElementById(selectTextId.value)
-      if (!isToggled && inputElem) { // simulate click to trigger dropdown open
+      if (!isToggled.value && inputElem) { // simulate click to trigger dropdown open
         inputElem.click()
       }
     }
diff --git a/src/components/KSelect/KSelectItem.vue b/src/components/KSelect/KSelectItem.vue
index f458706554..c4c807d2ba 100644
--- a/src/components/KSelect/KSelectItem.vue
+++ b/src/components/KSelect/KSelectItem.vue
@@ -107,6 +107,7 @@ export default defineComponent({
       .kong-icon {
         position: relative;
         top: 0;
+        transform: none;
       }
     }
 
diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index 0f205e3335..1e789095ca 100644
--- a/src/components/KTable/KTable.vue
+++ b/src/components/KTable/KTable.vue
@@ -492,7 +492,7 @@ export default defineComponent({
   },
   emits: ['sort', 'ktable-error-cta-clicked', 'ktable-empty-state-cta-clicked'],
   setup(props, { attrs }) {
-    const tableId = computed((): string => props.testMode ? uuidv1() : 'test-table-id-1234')
+    const tableId = computed((): string => props.testMode ? 'test-table-id-1234' : uuidv1())
     const defaultFetcherProps = {
       pageSize: 15,
       page: 1,
diff --git a/src/components/KTextArea/KTextArea.vue b/src/components/KTextArea/KTextArea.vue
index ebf23a88b7..fb527f0d8a 100644
--- a/src/components/KTextArea/KTextArea.vue
+++ b/src/components/KTextArea/KTextArea.vue
@@ -131,7 +131,7 @@ export default defineComponent({
     const isFocused = ref(false)
     const isHovered = ref(false)
 
-    const textAreaId = computed((): string => (attrs.id ? String(attrs.id) : !props.testMode ? uuidv1() : 'test-textArea-id-1234'))
+    const textAreaId = computed((): string => (attrs.id ? String(attrs.id) : props.testMode ? 'test-textArea-id-1234' : uuidv1()))
 
     const charLimitExceeded = computed((): boolean => !props.disableCharacterLimit && currValue.value.length > props.characterLimit)