Merge pull request #104 from cloudblue/LITE-30797-adjustments-in-autocomplete

LITE-30797 Adjustments in autocomplete

Author: arnaugiralt

components/src/stories/Autocomplete.stories.js

@@ -53,6 +53,24 @@ export const Validation = {
   },
 };
 
+export const ExtraProps = {
+  name: 'Customized options text',
+  render: Basic.render,
+  args: {
+    ...Basic.args,
+    label: 'This implementation uses the "optionTextFn" and "menuProps"',
+    options: [
+      { value: 'AR', label: 'Argentina' },
+      { value: 'AD', label: 'Andorra' },
+      { value: 'PL', label: 'Poland' },
+    ],
+    propValue: 'value',
+    propText: 'label',
+    optionTextFn: (item) => `${item.label} (${item.value})`,
+    menuProps: { fullWidth: false },
+  },
+};
+
 export default {
   title: 'Components/Autocomplete',
   component: Autocomplete,

components/src/widgets/autocomplete/widget.vue

@@ -9,11 +9,14 @@
       :propValue="propValue"
       :rules="rules"
       :hint="hint"
+      :optionTextFn="optionTextFn"
+      :menuProps="menuProps"
       @value-change="updateSelected"
     >
       <div
         slot="search-input"
         class="autocomplete__search"
+        :class="{ 'cancel-left-padding': !selected }"
       >
         <ui-textfield
           :value="userInput"
@@ -65,10 +68,25 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  optionTextFn: {
+    type: Function,
+    default: null,
+  },
+  menuProps: {
+    type: Object,
+    default: () => ({
+      fullWidth: true,
+    }),
+  },
 });
 
+const emit = defineEmits(['valueChange']);
+
 let userInput = ref('');
-let selected = ref('');
+let selected = defineModel({
+  type: String,
+  required: true,
+});
 
 const getOptionText = (option) => (typeof option === 'object' ? option[props.propText] : option);
 
@@ -89,6 +107,7 @@ const onUserInput = (e) => {
 const updateSelected = (e) => {
   selected.value = e.detail[0];
   userInput.value = '';
+  emit('valueChange', selected.value);
 };
 </script>
 
@@ -97,9 +116,6 @@ const updateSelected = (e) => {
 
   &__search {
     color: inherit;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
     line-height: 20px;
     font-size: 14px;
     border: 1px solid transparent;
@@ -111,7 +127,11 @@ const updateSelected = (e) => {
     width: 0;
     max-width: 100%;
     flex-grow: 1;
-    z-index: 1;
+  }
+
+  // there is too much padding coming from select + textfield
+  .cancel-left-padding {
+    margin-left: -11px;
   }
 }
 </style>

components/src/widgets/select/widget.spec.js

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 import Select from './widget.vue';
+import { nextTick } from 'vue';
 
 describe('Select', () => {
   let wrapper;
@@ -154,4 +155,29 @@ describe('Select', () => {
       });
     });
   });
+
+  describe('watch', () => {
+    beforeEach(() => {
+      wrapper = mount(Select, {
+        props: {
+          modelValue: '1',
+          options: [
+            { id: '1', value: 'Option 1' },
+            { id: '2', value: 'Option 2' },
+          ],
+          propValue: 'id',
+        },
+      });
+    });
+
+    it('should update selectedOption when model changes', async () => {
+      // Initial check
+      expect(wrapper.vm.selectedOption).toEqual({ id: '1', value: 'Option 1' });
+
+      await wrapper.setProps({ modelValue: '2' });
+      await nextTick();
+
+      expect(wrapper.vm.selectedOption).toEqual({ id: '2', value: 'Option 2' });
+    });
+  });
 });

components/src/widgets/select/widget.vue

@@ -73,7 +73,7 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import Menu from '~widgets/menu/widget.vue';
 import Icon from '~widgets/icon/widget.vue';
 import { useFieldValidation } from '~composables/validation';
@@ -168,6 +168,16 @@ const getDisplayText = (item) => {
   if (props.optionTextFn) return props.optionTextFn(item);
   return item[props.propText];
 };
+
+watch(
+  model,
+  (newValue) => {
+    selectedOption.value = computedOptions.value.find(
+      (option) => option[props.propValue] === newValue,
+    );
+  },
+  { immediate: true },
+);
 </script>
 
 <style lang="stylus" scoped>