fix(select): close options on selected item click (#61)

brojor · web-flow · commit 82f86b7c0fe7 · 2022-11-02T14:34:18.000+05:30
diff --git a/packages/anu-vue/src/components/select/ASelect.tsx b/packages/anu-vue/src/components/select/ASelect.tsx
@@ -1,7 +1,7 @@
 import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'
 import { onClickOutside } from '@vueuse/core'
 import type { PropType } from 'vue'
-import { Teleport, computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { Teleport, computed, defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'
 import { isObject } from '@/utils/helpers'
 import { ABaseInput, useBaseInputProp } from '@/components/base-input'
 
@@ -103,15 +103,6 @@ export const ASelect = defineComponent({
     )
 
     // !SECTION
-
-    // 👉 watch: modelValue
-    watch(
-      () => props.modelValue,
-      () => {
-        isOptionsVisible.value = false
-      },
-    )
-
     // TODO: You can use it as utility in another components
     // TODO: Add some style to indicate currently selected item
     const handleInputClick = () => {
@@ -128,6 +119,10 @@ export const ASelect = defineComponent({
       emit('input', value)
       emit('update:modelValue', value)
     }
+    const closeOptions = (event: MouseEvent) => {
+      if (event.target !== refFloating.value)
+        isOptionsVisible.value = false
+    }
 
     // 👉 Value
     const selectedValue = computed(() => {
@@ -157,6 +152,7 @@ export const ASelect = defineComponent({
             </ABaseInput>
             <Teleport to="body">
                 <ul
+                   onClick={closeOptions}
                     v-show={isOptionsVisible.value}
                     ref={refFloating}
                     class={['a-select-options-container absolute bg-[hsl(var(--a-layer))]', props.optionsWrapperClasses]}>
