PB-441: Fix Select input not selecting option on keypress issue

changelog.md

@@ -1,22 +1,24 @@
-2024-07-26 - 2ceb7b2988f8d3ffcdd46ffdd4d0316d485a10c1 - /components/ListTable/list-table.scss, /components/ListTable/listTable.vue, /components/ListTable/TableHeaderCell.vue- display selectable column header skeleton
+2024-07-29 - 9328fceaf61ede65f4dc0074ac92de0a0cba88fb - Input/Select/navigation-mixin.ts - Fix Select input not selecting option on keypress issue
 
-2024-07-26 - b709a7576bc44c621f64b91e15f174e7af9eeee5 - /components/ListTable/ListTable.vue - display selectable column skeleton
+2024-07-26 - 2ceb7b2988f8d3ffcdd46ffdd4d0316d485a10c1 - ListTable/list-table.scss, ListTable/listTable.vue, ListTable/TableHeaderCell.vue- display selectable column header skeleton
 
-2024-07-26 - dd1c3563dfa6d9d3c897a5d3ecc7632fa284f89d - /components/ListTable/TableHeaderCell.vue, /components/Skeleton/_variables.scss, /components/Skeleton/skeleton.scss, /components/Skeleton/skeleton.vue - highlight skeleton colour
+2024-07-26 - b709a7576bc44c621f64b91e15f174e7af9eeee5 - ListTable/ListTable.vue - display selectable column skeleton
 
-2024-07-26 - 7b223c63f057a7664719d2336b82c5ba4b6be3be - /components/ListTable/ListTable.vue, /components/ListTable/TableHeaderCell.vue - remove header max width
+2024-07-26 - dd1c3563dfa6d9d3c897a5d3ecc7632fa284f89d - ListTable/TableHeaderCell.vue, Skeleton/\_variables.scss, Skeleton/skeleton.scss, Skeleton/skeleton.vue - highlight skeleton colour
 
-2024-06-26 - f91c5a9ac899c5e8a431447d7611d95b9ca38cce - components/CardTable/Decorator/DefaultCardMobile.vue, components/CardTable/Decorator/DefaultCardWeb.vue, components/CardTable/Decorator/card.scss, components/ListTable/CellContainer.vue, components/ListTable/CellContainer.vue, components/ListTable/ListTable.vue, components/ListTable/TableHeader.vue, components/ListTable/TableHeaderCell.vue, components/src/core/components/ListTable/_variables.scss, components/ListTable/table-header-cell.scss, components/ListTable/table-header.scss - Fixed Skeleton loader related issues in VUE lists
+2024-07-26 - 7b223c63f057a7664719d2336b82c5ba4b6be3be - ListTable/ListTable.vue, ListTable/TableHeaderCell.vue - remove header max width
+
+2024-06-26 - f91c5a9ac899c5e8a431447d7611d95b9ca38cce - CardTable/Decorator/DefaultCardMobile.vue, CardTable/Decorator/DefaultCardWeb.vue, CardTable/Decorator/card.scss, ListTable/CellContainer.vue, ListTable/CellContainer.vue, ListTable/ListTable.vue, ListTable/TableHeader.vue, ListTable/TableHeaderCell.vue, src/coreListTable/\_variables.scss, ListTable/table-header-cell.scss, ListTable/table-header.scss - Fixed Skeleton loader related issues in VUE lists
 
 2024-06-24 - 26320f5efcb9e3023ef7cfb7d095042b6963f8dd - Icon/icons.ts - Add oxd-email & oxd-document-text-3 icons
 
 2024-06-17 - d2aa0e5610ea393c9cd0e963123a84e4ff8d4f4c - Icon/icons.ts - Add oxd-dollar-note,oxd-document-consent,oxd-document-disclosure,oxd-document-info,oxd-document-home,oxd-document-text-2,oxd-employee-info-card,oxd-employee-reference,oxd-employee-question,oxd-employee-welcome,oxd-contact,oxd-emergency-contact,oxd-wallet icons
 
-2024-05-14 - f91c5a9ac899c5e8a431447d7611d95b9ca38cce - styles/_colors.scss - label-feedback-reject color changed
+2024-05-14 - f91c5a9ac899c5e8a431447d7611d95b9ca38cce - styles/\_colors.scss - label-feedback-reject color changed
 
 2024-05-14 - f91c5a9ac899c5e8a431447d7611d95b9ca38cce - Icon/icons.ts - Add oxd-unarchive icon
 
-2024-05-09 - 5a8b404db53df944733a36a373b1429c98a6d79d - Button/button.scss, Button/types.ts, Button/_variables.scss, styles/_colors.scss - Add label-feedback-reject button
+2024-05-09 - 5a8b404db53df944733a36a373b1429c98a6d79d - Button/button.scss, Button/types.ts, Button/\_variables.scss, styles/\_colors.scss - Add label-feedback-reject button
 
 2024-05-06 - 78c22c31a971adbf9a9c146f871994bcf7eaa648 - components/LinearProgress/LinearProgress.vue - Add new component LinearProgress to support linear progress
 

components/src/core/components/Input/FileInput.vue

@@ -2,7 +2,11 @@
   <div>
     <div class="oxd-download-box-outer-wrapper" v-if="inputFile.name">
       <div class="oxd-download-box-wrapper d-flex">
-        <button class="oxd-download-box" @click="downloadBoxClick()" type="button">
+        <button
+          class="oxd-download-box"
+          @click="downloadBoxClick()"
+          type="button"
+        >
           <div class="oxd-download-box-doc-icon d-flex">
             <oxd-icon :name="'oxd-file-doc'"> </oxd-icon>
           </div>
@@ -15,33 +19,70 @@
             </div>
           </div>
         </button>
-        <div class="oxd-download-box-radio-buttons" v-if="!(disabled || readonly)">
-          <oxd-radio-input v-model="fileUpdateMode" id="check1" value="keep" :optionLabel="$vt('Keep Current')" />
-          <oxd-radio-input v-if="deletable" v-model="fileUpdateMode" id="check2" value="delete" :optionLabel="$vt('Delete Current')" />
-          <oxd-radio-input v-model="fileUpdateMode" id="check3" value="replace" :optionLabel="$vt('Replace Current')" />
+        <div
+          class="oxd-download-box-radio-buttons"
+          v-if="!(disabled || readonly)"
+        >
+          <oxd-radio-input
+            v-model="fileUpdateMode"
+            id="check1"
+            value="keep"
+            :optionLabel="$vt('Keep Current')"
+          />
+          <oxd-radio-input
+            v-if="deletable"
+            v-model="fileUpdateMode"
+            id="check2"
+            value="delete"
+            :optionLabel="$vt('Delete Current')"
+          />
+          <oxd-radio-input
+            v-model="fileUpdateMode"
+            id="check3"
+            value="replace"
+            :optionLabel="$vt('Replace Current')"
+          />
         </div>
       </div>
     </div>
     <div v-if="fileUpdateMode === 'replace' || !inputFile.name">
-      <input type="file" ref="input" v-bind="$attrs" :class="fileInputClasses" :disabled="disabled" @focus="onFocus" @blur="onBlur" @input="onInput" @keyup.esc.stop />
+      <input
+        type="file"
+        ref="input"
+        v-bind="$attrs"
+        :class="fileInputClasses"
+        :disabled="disabled"
+        @focus="onFocus"
+        @blur="onBlur"
+        @input="onInput"
+        @keyup.esc.stop
+      />
       <div :class="classes" :style="style" @click="onClick">
         <slot></slot>
         <template v-if="!$slots.default">
-          <div v-if="buttonLabel" :class="{ 'oxd-file-button': true, '--disabled': disabled }">
+          <div
+            v-if="buttonLabel"
+            :class="{'oxd-file-button': true, '--disabled': disabled}"
+          >
             {{ buttonLabel }}
           </div>
-          <div :class="{ 'oxd-file-input-div': true, '--placeholder': !inputValue }">
+          <div
+            :class="{'oxd-file-input-div': true, '--placeholder': !inputValue}"
+          >
             {{ inputValue ? inputValue : placeholder }}
           </div>
-          <oxd-icon :class="{ 'oxd-file-input-icon': true, '--disabled': disabled }" :name="buttonIcon" />
+          <oxd-icon
+            :class="{'oxd-file-input-icon': true, '--disabled': disabled}"
+            :name="buttonIcon"
+          />
         </template>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import {defineComponent, PropType} from 'vue';
 import {
   ATTACHMENT_UPDATE_MODE_KEEP,
   FileUpdateMode,
@@ -75,7 +116,7 @@ export default defineComponent({
     initialFileUpdateMode: {
       type: String as PropType<string>,
       default: ATTACHMENT_UPDATE_MODE_KEEP,
-      validator: function (value: FileUpdateMode) {
+      validator: function(value: FileUpdateMode) {
         return FILE_UPDATE_MODES.indexOf(value) !== -1;
       },
     },

components/src/core/components/Input/Select/SelectInputButton.vue

@@ -87,7 +87,11 @@
           <div class="w-100 d-flex align-center justify-between">
             <span class="label">{{ $vt(modelValue.label) }}</span>
             <oxd-icon-button
-              :name="dropdownOpen ? dropdownTriggerCloseIcon : dropdownTriggerOpenIcon"
+              :name="
+                dropdownOpen
+                  ? dropdownTriggerCloseIcon
+                  : dropdownTriggerOpenIcon
+              "
               size="xxx-small"
               class="oxd-select-dropdown-trigger"
               @click="wholeButtonClickable ? {} : onToggleDropdown()"
@@ -107,7 +111,9 @@
         v-slot:iconRight
       >
         <oxd-icon-button
-          :name="dropdownOpen ? dropdownTriggerCloseIcon : dropdownTriggerOpenIcon"
+          :name="
+            dropdownOpen ? dropdownTriggerCloseIcon : dropdownTriggerOpenIcon
+          "
           size="xxx-small"
           class="oxd-select-dropdown-trigger"
           :class="{

components/src/core/components/Input/Select/navigation-mixin.ts

@@ -69,11 +69,14 @@ export const navigationMixin = defineComponent({
     },
     onKeypress($e: KeyboardEvent) {
       if ($e.key.length > 1) return; // Filter one letter keypress only
+      if (this.disabled || this.readonly) return;
       const filtered = this.computedOptions.flatMap((item: Option, i: number) =>
         item.label.toLowerCase().startsWith($e.key) && !item._disabled ? i : [],
       );
       if (filtered.length > 0) {
         this.pointer = cycleIndexes(this.pointer, filtered);
+        const option = this.computedOptions[this.pointer];
+        if (!option?._selected && !option?._disabled) this.onSelect(option);
       }
     },
 

components/src/core/components/Input/__tests__/select-input.spec.ts

@@ -263,28 +263,26 @@ describe('SelectInput.vue', () => {
   });
 
   it('should pass default prop icons values to oxd-icon-button (oxd-select-dropdown-trigger) as props when no open-close icons are passed', async () => {
-
     const wrapper = mount(SelectInputButton, {
       props: {
         options,
         modelValue: {
           id: 1,
           label: 'HR Admin',
-        }
+        },
       },
     });
 
     let iconButton = wrapper.findComponent({name: 'oxd-icon-button'});
     expect(iconButton.props('name')).toBe('oxd-chevron-down');
 
-    wrapper.setData({ dropdownOpen: true });
+    wrapper.setData({dropdownOpen: true});
     iconButton = wrapper.findComponent({name: 'oxd-icon-button'});
     await wrapper.vm.$nextTick();
     expect(iconButton.props('name')).toBe('oxd-chevron-up');
   });
 
   it('should pass correct icons as props to oxd-icon-button (oxd-select-dropdown-trigger)', async () => {
-
     const dropdownTriggerOpenIcon = 'oxd-dropdown-open-icon';
     const dropdownTriggerCloseIcon = 'oxd-dropdown-close-icon';
 
@@ -296,17 +294,16 @@ describe('SelectInput.vue', () => {
         modelValue: {
           id: 1,
           label: 'HR Admin',
-        }
+        },
       },
     });
 
     let iconButton = wrapper.findComponent({name: 'oxd-icon-button'});
     expect(iconButton.props('name')).toBe(dropdownTriggerOpenIcon);
 
-    wrapper.setData({ dropdownOpen: true });
+    wrapper.setData({dropdownOpen: true});
     iconButton = wrapper.findComponent({name: 'oxd-icon-button'});
     await wrapper.vm.$nextTick();
     expect(iconButton.props('name')).toBe(dropdownTriggerCloseIcon);
   });
-
 });