fix(kselect): display

Kong · Apr 20, 2022 · 7b1f9d4 · 7b1f9d4
1 parent f32562e
commit 7b1f9d4
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)