From e187c58824346cc9a6db276e661f82043d721cce Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 13 Nov 2024 19:17:03 +0300
Subject: [PATCH] Add autocomplete off

---
 .../components/layout/designer/DesignTokenField.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/apps/showcase/components/layout/designer/DesignTokenField.vue b/apps/showcase/components/layout/designer/DesignTokenField.vue
index 3a5d725b8..dbcc9bef9 100644
--- a/apps/showcase/components/layout/designer/DesignTokenField.vue
+++ b/apps/showcase/components/layout/designer/DesignTokenField.vue
@@ -2,8 +2,17 @@
     <div>
         <label :for="inputId" class="text-sm">{{ label }}</label>
         <div :id="id" class="relative">
-            <input :id="inputId" :list="listId" type="text" :value="modelValue" @input="onInput" @change="onChange" :class="['relative border border-surface-300 dark:border-surface-600 rounded-lg py-2 px-2 w-full', { 'pr-8': type === 'color' }]" />
-            <datalist :id="listId" class="max-h-40 overflow-auto">
+            <input
+                :id="inputId"
+                :list="listId"
+                autocomplete="off"
+                type="text"
+                :value="modelValue"
+                @input="onInput"
+                @change="onChange"
+                :class="['relative border border-surface-300 dark:border-surface-600 rounded-lg py-2 px-2 w-full', { 'pr-8': type === 'color' }]"
+            />
+            <datalist :id="listId">
                 <option v-for="item of items" :key="item">{{ item }}</option>
             </datalist>
             <div v-if="type === 'color'" class="absolute right-[4px] top-1/2 -mt-3 w-6 h-6 rounded-md border border-surface-300 dark:border-surface-600" :style="{ backgroundColor: previewColor }"></div>