fix(Combobox): pressing enter selecting and deselect the value

unovue · Dec 11, 2024 · 6f9e1d3 · 6f9e1d3
1 parent 3e150bf
commit 6f9e1d3
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 48 deletions.
diff --git a/packages/core/src/Combobox/Combobox.test.ts b/packages/core/src/Combobox/Combobox.test.ts
@@ -273,19 +273,23 @@ describe('given a Combobox with object', async () => {
 })
 
 describe('given combobox in a form', async () => {
-  const wrapper = mount({
-    props: ['handleSubmit'],
-    components: { Combobox },
-    template: '<form @submit="handleSubmit"><Combobox /></form>',
-  }, {
-    props: { handleSubmit },
-  })
-
-  const valueBox = wrapper.find('input')
+  let wrapper: VueWrapper<InstanceType<any>>
+  let valueBox: DOMWrapper<HTMLInputElement>
 
   let enterEventBubbledToForm = false
 
   beforeEach(() => {
+    wrapper = mount({
+      props: ['handleSubmit'],
+      components: { Combobox },
+      template: '<form @submit="handleSubmit"><Combobox /></form>',
+    }, {
+      props: { handleSubmit },
+      attachTo: document.body,
+    })
+
+    valueBox = wrapper.find('input')
+
     enterEventBubbledToForm = false
     wrapper.find('form').element.addEventListener('keydown', (event) => {
       if (event.key === 'Enter') {

diff --git a/packages/core/src/Combobox/ComboboxRoot.vue b/packages/core/src/Combobox/ComboboxRoot.vue
@@ -102,6 +102,8 @@ async function onOpenChange(val: boolean) {
   filterState.search = ''
 
   if (val) {
+    // make sure dom is ready then only highlight the selected
+    await nextTick()
     primitiveElement.value?.highlightSelected()
     isUserInputted.value = true
   }

diff --git a/packages/core/src/Combobox/story/ComboboxSelectMenu.story.vue b/packages/core/src/Combobox/story/ComboboxSelectMenu.story.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport } from '..'
+import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport } from '..'
 import { Icon } from '@iconify/vue'
 import type { GenericComponentInstance } from '@/shared/types'
 
@@ -52,48 +52,54 @@ const comboboxRef = ref<GenericComponentInstance<typeof ComboboxRoot>>()
             />
           </ComboboxTrigger>
         </ComboboxAnchor>
-        <ComboboxContent class="mt-2 min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
-          <ComboboxViewport class="p-[5px]">
-            <ComboboxInput
-              class="bg-transparent outline-none text-grass11 placeholder-gray-400"
-              placeholder="Test"
-            />
 
-            <ComboboxEmpty class="text-mauve8 text-xs font-medium text-center py-2" />
+        <ComboboxPortal>
+          <ComboboxContent
+            position="popper"
+            class="mt-2 min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
+          >
+            <ComboboxViewport class="p-[5px]">
+              <ComboboxInput
+                class="bg-transparent outline-none text-grass11 placeholder-gray-400"
+                placeholder="Test"
+              />
+
+              <ComboboxEmpty class="text-mauve8 text-xs font-medium text-center py-2" />
 
-            <template
-              v-for="(group, index) in options"
-              :key="group.name"
-            >
-              <ComboboxGroup>
-                <ComboboxSeparator
-                  v-if="index !== 0"
-                  class="h-[1px] bg-grass6 m-[5px]"
-                />
+              <template
+                v-for="(group, index) in options"
+                :key="group.name"
+              >
+                <ComboboxGroup>
+                  <ComboboxSeparator
+                    v-if="index !== 0"
+                    class="h-[1px] bg-grass6 m-[5px]"
+                  />
 
-                <ComboboxLabel class="px-[25px] text-xs leading-[25px] text-mauve11">
-                  {{ group.name }}
-                </ComboboxLabel>
+                  <ComboboxLabel class="px-[25px] text-xs leading-[25px] text-mauve11">
+                    {{ group.name }}
+                  </ComboboxLabel>
 
-                <ComboboxItem
-                  v-for="option in group.children"
-                  :key="option.name"
-                  :value="option.name"
-                  class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-grass9 data-[highlighted]:text-grass1"
-                >
-                  <ComboboxItemIndicator
-                    class="absolute left-0 w-[25px] inline-flex items-center justify-center"
+                  <ComboboxItem
+                    v-for="option in group.children"
+                    :key="option.name"
+                    :value="option.name"
+                    class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-grass9 data-[highlighted]:text-grass1"
                   >
-                    <Icon icon="radix-icons:check" />
-                  </ComboboxItemIndicator>
-                  <span>
-                    {{ option.name }}
-                  </span>
-                </ComboboxItem>
-              </ComboboxGroup>
-            </template>
-          </ComboboxViewport>
-        </ComboboxContent>
+                    <ComboboxItemIndicator
+                      class="absolute left-0 w-[25px] inline-flex items-center justify-center"
+                    >
+                      <Icon icon="radix-icons:check" />
+                    </ComboboxItemIndicator>
+                    <span>
+                      {{ option.name }}
+                    </span>
+                  </ComboboxItem>
+                </ComboboxGroup>
+              </template>
+            </ComboboxViewport>
+          </ComboboxContent>
+        </ComboboxPortal>
       </ComboboxRoot>
     </Variant>
   </Story>

diff --git a/packages/core/src/Listbox/ListboxRoot.vue b/packages/core/src/Listbox/ListboxRoot.vue
@@ -182,7 +182,7 @@ function highlightItem(value: T) {
 }
 
 function onKeydownEnter(event: KeyboardEvent) {
-  if (highlightedElement.value) {
+  if (highlightedElement.value && highlightedElement.value.isConnected) {
     event.preventDefault()
     event.stopPropagation()