无法在选项卡或单选组组件内使用 vue headless ui 组合框滚动条

Question

我无法在无头 UI 选项卡组件中使用滚动条，当我单击并滚动滚动条时，组合框将关闭。ComboBoxInput 出现关闭滚动条的问题。 当我在滚动条内单击时，组合框将关闭，因为选项卡组件将焦点移动到选项卡元素本身，因此模糊了关闭组合框的组合框。

您在 Headless UI 中使用什么包？ @headlessui/vue

您使用的是该软件包的哪个版本？ v1.7.19

您使用什么浏览器？ 铬

Vue 版本 - 3.3.10

<TabGroup>
<TabList class="flex gap-6 p-2 pb-0">
                      <Tab
                        as="template"
                        :key="'1"
                        v-slot="{ selected }"
                      >
                    <button
                    :class="[
                        'py-2.5 px-1 text-left text-sm font-medium leading-5 text-gray-500',
                        'focus:outline-none',
                        selected ? 'border-b-2 border-blue-600 text-blue-600' : ''
                      ]"
                    >
                  <spanTab</span> 
                    </button>
               </Tab>
       <TabPanels class="mt-2">
              <TabPanel
              :key="'2'"
              :class="[
                      'rounded-lg bg-white  shadow-md',
                      'focus:outline-none ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:ring-2'
                    ]">    
            <Combobox v-model="selected">
      <div class="relative mt-1">
        <div
          class="relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm"
        >
          <ComboboxInput
            class="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
            :displayValue="(person) => person.name"
            @change="query = $event.target.value"
          />
          <ComboboxButton
            class="absolute inset-y-0 right-0 flex items-center pr-2"
          >
            <ChevronUpDownIcon
              class="h-5 w-5 text-gray-400"
              aria-hidden="true"
            />
          </ComboboxButton>
        </div>
        <TransitionRoot
          leave="transition ease-in duration-100"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
          @after-leave="query = ''"
        >
          <ComboboxOptions
            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm"
          >
            <div
              v-if="filteredPeople.length === 0 && query !== ''"
              class="relative cursor-default select-none px-4 py-2 text-gray-700"
            >
              Nothing found.
            </div>

            <ComboboxOption
              v-for="person in filteredPeople"
              as="template"
              :key="person.id"
              :value="person"
              v-slot="{ selected, active }"
            >
              <li
                class="relative cursor-default select-none py-2 pl-10 pr-4"
                :class="{
                  'bg-teal-600 text-white': active,
                  'text-gray-900': !active,
                }"
              >
                <span
                  class="block truncate"
                  :class="{ 'font-medium': selected, 'font-normal': !selected }"
                >
                  {{ person.name }}
                </span>
                <span
                  v-if="selected"
                  class="absolute inset-y-0 left-0 flex items-center pl-3"
                  :class="{ 'text-white': active, 'text-teal-600': !active }"
                >
                  <CheckIcon class="h-5 w-5" aria-hidden="true" />
                </span>
              </li>
            </ComboboxOption>
          </ComboboxOptions>
        </TransitionRoot>
      </div>
    </Combobox>
              </TabPanel>
        </TabPanels>
    </TabGroup>

我无法在无头 UI 选项卡组件中使用滚动条，当我单击并滚动滚动条时，组合框将关闭。ComboBoxInput 出现关闭滚动条的问题。组合框滚动条添加到选项卡组件内时不应关闭。

Answer 1

尝试在模糊时使用 PreventDefault()。