From e970646229160859ce7e4b1adc5d4743b126a784 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Tue, 21 Jan 2025 17:00:16 +0500
Subject: [PATCH] refactor: 'Select'

---
 src/components/Select/Select.stories.ts |  1 +
 src/components/Select/Select.vue        | 19 +++++++++++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/Select/Select.stories.ts b/src/components/Select/Select.stories.ts
index 01d4336..7d2cea1 100644
--- a/src/components/Select/Select.stories.ts
+++ b/src/components/Select/Select.stories.ts
@@ -18,6 +18,7 @@ const meta: Meta = {
     width: { control: 'text' },
     filtered: { control: 'boolean' },
     disabled: { control: 'boolean' },
+    noHighlight: { control: 'boolean' },
     placeholder: { control: 'text' },
     name: { control: 'text' },
     openIcon: { control: 'select', options: Object.keys(iconsSet) },
diff --git a/src/components/Select/Select.vue b/src/components/Select/Select.vue
index 45fdd28..2142812 100644
--- a/src/components/Select/Select.vue
+++ b/src/components/Select/Select.vue
@@ -49,6 +49,10 @@ const pickOption = (value: string) => {
 };
 const calcOptionColor = (color: TThemeColor | undefined, darknessColor: string | undefined, defaultColor: string) =>
   color ? convertThemeToColor(color, darknessColor ?? '500') : defaultColor;
+
+document.querySelector('body').addEventListener('pointerup', (e: MouseEvent) => {
+  if (isOpen.value && e.button === 0) isOpen.value = false;
+});
 </script>
 
 <template>
@@ -59,9 +63,17 @@ const calcOptionColor = (color: TThemeColor | undefined, darknessColor: string |
         {{ option.label ?? option.value }}
       </option>
     </select>
-    <div class="list" :style="`background-color: ${backgroundColor}`">
+    <div
+      :class="[
+        'list',
+        {
+          noHighlight,
+        },
+      ]"
+      :style="`background-color: ${backgroundColor}`"
+    >
       <button
-        @click.prevent="!disabled ? (isOpen = !isOpen) : ''"
+        @click="!disabled ? (isOpen = !isOpen) : ''"
         :class="[
           'button',
           {
@@ -257,4 +269,7 @@ const calcOptionColor = (color: TThemeColor | undefined, darknessColor: string |
   background-color: #e1e7f1 !important;
   border-radius: 4px;
 }
+.noHighlight * {
+  user-select: none;
+}
 </style>
-- 
GitLab