feat(AutoComplete): add listener to autocomplete component (#111)

rotki · Sep 12, 2023 · 9bcb91e · 9bcb91e
1 parent 5979076
commit 9bcb91e
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 0 deletions.
diff --git a/src/components/forms/auto-complete/AutoComplete.vue b/src/components/forms/auto-complete/AutoComplete.vue
@@ -175,6 +175,8 @@ const updateOpen = (open: boolean) => {
     });
   }
 };
+
+const attrs = useAttrs();
 </script>
 
 <template>
@@ -198,6 +200,7 @@ const updateOpen = (open: boolean) => {
         <TextField
           v-model="query"
           :as="AutoCompleteSelection"
+          v-bind="attrs"
           :color="color"
           :data="modelValue"
           :dense="dense"

diff --git a/src/components/forms/text-field/TextField.spec.ts b/src/components/forms/text-field/TextField.spec.ts
@@ -25,6 +25,15 @@ describe('Forms/TextField', () => {
     expect(wrapper.find('input').attributes('disabled')).toBeUndefined();
   });
 
+  it('passes readonly props', async () => {
+    const wrapper = createWrapper();
+    expect(wrapper.find('input').attributes('readonly')).toBeUndefined();
+    await wrapper.setProps({ readonly: true });
+    expect(wrapper.find('input').attributes('readonly')).toBeDefined();
+    await wrapper.setProps({ readonly: false });
+    expect(wrapper.find('input').attributes('readonly')).toBeUndefined();
+  });
+
   it('passes color props', async () => {
     const wrapper = createWrapper();
     expect(wrapper.find('div[class*=wrapper]').classes()).toMatch(/_grey_/);

diff --git a/src/components/forms/text-field/TextField.stories.ts b/src/components/forms/text-field/TextField.stories.ts
@@ -40,6 +40,7 @@ const meta: Meta<Props> = {
       table: { category: 'State' },
     },
     disabled: { control: 'boolean', table: { category: 'State' } },
+    readonly: { control: 'boolean', table: { category: 'State' } },
     color: {
       control: 'select',
       options: ['grey', ...contextColors],
@@ -105,6 +106,16 @@ export const Disabled: Story = {
   },
 };
 
+export const Readonly: Story = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    variant: 'outlined',
+    readonly: true,
+    modelValue: 'Readonly text',
+  },
+};
+
 export const WithErrorMessage: Story = {
   args: {
     label: 'Label',

diff --git a/src/components/forms/text-field/TextField.vue b/src/components/forms/text-field/TextField.vue
@@ -18,6 +18,7 @@ export interface Props {
   hideDetails?: boolean;
   prependIcon?: RuiIcons;
   appendIcon?: RuiIcons;
+  readonly?: boolean;
 }
 
 defineOptions({
@@ -38,6 +39,7 @@ const props = withDefaults(defineProps<Props>(), {
   hideDetails: false,
   prependIcon: undefined,
   appendIcon: undefined,
+  readonly: false,
 });
 
 const emit = defineEmits<{
@@ -120,6 +122,7 @@ const slots = useSlots();
           :disabled="disabled"
           :dense="dense"
           :variant="variant"
+          :readonly="readonly"
           :wrapper-width="width"
           v-bind="objectOmit(attrs, ['class'])"
           @input="input($event)"