Skip to content

Commit

Permalink
Fix outside click detection when component is mounted in the Shadow D…
Browse files Browse the repository at this point in the history 
…OM (#2866)

* Fix outside click detection when component is mounted in the Shadow DOM

* Fix code style

* Fix error
  • Loading branch information
@thecrypticace
thecrypticace authored Dec 5, 2023
1 parent 24486b3 commit 7b30e06
Show file tree
Hide file tree
Showing 3 changed files with 146 additions and 123 deletions.
1 change: 1 addition & 0 deletions packages/@headlessui-react/src/hooks/use-root-containers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export function useRootContainers({
if (!(container instanceof HTMLElement)) continue // Skip non-HTMLElements
if (container.id === 'headlessui-portal-root') continue // Skip the Headless UI portal root
if (container.contains(mainTreeNodeRef.current)) continue // Skip if it is the main app
if (container.contains((mainTreeNodeRef.current?.getRootNode() as ShadowRoot)?.host)) continue // Skip if it is the main app (and the component is inside a shadow root)
if (containers.some((defaultContainer) => container.contains(defaultContainer))) continue // Skip if the current container is part of a container we've already seen (e.g.: default container / portal)

containers.push(container)
Expand Down
168 changes: 86 additions & 82 deletions packages/playground-react/pages/combobox/combobox-virtual-with-empty-states.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { useRef, useState } from 'react'
import { classNames } from '../../utils/class-names'

import { Button } from '../../components/button'
import { flushSync } from 'react-dom'

type Option = {
name: string
Expand All @@ -13,32 +12,32 @@ type Option = {

export default function Home() {
let [list, setList] = useState<Option[]>(() => [
{name: 'Alice', disabled: false},
{name: 'Bob', disabled: false},
{name: 'Charlie', disabled: false},
{name: 'David', disabled: false},
{name: 'Eve', disabled: false},
{name: 'Fred', disabled: false},
{name: 'George', disabled: false},
{name: 'Helen', disabled: false},
{name: 'Iris', disabled: false},
{name: 'John', disabled: false},
{name: 'Kate', disabled: false},
{name: 'Linda', disabled: false},
{name: 'Michael', disabled: false},
{name: 'Nancy', disabled: false},
{name: 'Oscar', disabled: true},
{name: 'Peter', disabled: false},
{name: 'Quentin', disabled: false},
{name: 'Robert', disabled: false},
{name: 'Sarah', disabled: false},
{name: 'Thomas', disabled: false},
{name: 'Ursula', disabled: false},
{name: 'Victor', disabled: false},
{name: 'Wendy', disabled: false},
{name: 'Xavier', disabled: false},
{name: 'Yvonne', disabled: false},
{name: 'Zachary', disabled: false},
{ name: 'Alice', disabled: false },
{ name: 'Bob', disabled: false },
{ name: 'Charlie', disabled: false },
{ name: 'David', disabled: false },
{ name: 'Eve', disabled: false },
{ name: 'Fred', disabled: false },
{ name: 'George', disabled: false },
{ name: 'Helen', disabled: false },
{ name: 'Iris', disabled: false },
{ name: 'John', disabled: false },
{ name: 'Kate', disabled: false },
{ name: 'Linda', disabled: false },
{ name: 'Michael', disabled: false },
{ name: 'Nancy', disabled: false },
{ name: 'Oscar', disabled: true },
{ name: 'Peter', disabled: false },
{ name: 'Quentin', disabled: false },
{ name: 'Robert', disabled: false },
{ name: 'Sarah', disabled: false },
{ name: 'Thomas', disabled: false },
{ name: 'Ursula', disabled: false },
{ name: 'Victor', disabled: false },
{ name: 'Wendy', disabled: false },
{ name: 'Xavier', disabled: false },
{ name: 'Yvonne', disabled: false },
{ name: 'Zachary', disabled: false },
])

let emptyOption = useRef({ name: 'No results', disabled: true, empty: true })
Expand All @@ -52,10 +51,9 @@ export default function Home() {
? list
: list.filter((item) => item.name.toLowerCase().includes(query.toLowerCase()))


return (
<div className="mx-auto max-w-fit">
<div className="py-8 font-mono text-xs">Selected person: {selectedPerson?.name ?? "N/A"}</div>
<div className="py-8 font-mono text-xs">Selected person: {selectedPerson?.name ?? 'N/A'}</div>
<Combobox
virtual={{
options: filtered.length > 0 ? filtered : [emptyOption.current],
Expand All @@ -68,12 +66,11 @@ export default function Home() {
setQuery('')
}}
as="div"

// Don't do this lol — it's not supported
// It's just so we can tab to the "Add" button for the demo
// The combobox doesn't actually support this behavior
onKeyDownCapture={(event: KeyboardEvent) => {
let addButton = document.querySelector('#add_person')
let addButton = document.querySelector('#add_person') as HTMLElement | null
if (event.key === 'Tab' && addButton && filtered.length === 0) {
event.preventDefault()
setTimeout(() => addButton.focus(), 0)
Expand Down Expand Up @@ -116,69 +113,76 @@ export default function Home() {
// It comes with some caveats:
// like the option callback being called with a null option (which is probably a bug)
static={filtered.length === 0}

ref={optionsRef}
className={classNames(
"shadow-xs max-h-60 rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5",
'shadow-xs max-h-60 rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5',
filtered.length === 0 ? 'overflow-hidden' : 'overflow-auto'
)}
>
{
({ option }: { option: Option }) => {
if (!option || option.empty) {
return (
<Combobox.Option
// TODO: `disabled` being required is a bug
disabled
// Note: Do NOT use `null` for the `value`
value={option ?? emptyOption.current}
className="relative w-full cursor-default select-none py-2 px-3 focus:outline-none text-center"
>
<div className="grid grid-cols-1 grid-rows-1 h-full relative">
<div className="absolute inset-0">
<svg fill="none" viewBox="0 0 24 24" strokeWidth={0.5} stroke="currentColor" className="text-gray-500/5 -translate-y-1/4">
<path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
</svg>
</div>
<div className="z-20 col-start-1 row-start-1 col-span-full row-span-full p-8 flex flex-col justify-center items-center">
<h3 className="mx-2 text-xl mb-4 text-gray-400 font-semibold">No people found</h3>
<button
id="add_person"
type="button"
className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded font-semibold focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:outline-none"
onClick={() => {
let person = { name: query, disabled: false }
setList(list => [...list, person])
setSelectedPerson(person)
}}
>
Add "{query}"
</button>
</div>
</div>
</Combobox.Option>
)
}

{({ option }: { option: Option }) => {
if (!option || option.empty) {
return (
<Combobox.Option
// TODO: `disabled` being required is a bug
disabled={option.disabled}
value={option}
className={({ active }) => {
return classNames(
'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
)
}}
disabled
// Note: Do NOT use `null` for the `value`
value={option ?? emptyOption.current}
className="relative w-full cursor-default select-none px-3 py-2 text-center focus:outline-none"
>
<span className='block truncate'>
{option.name}
</span>
<div className="relative grid h-full grid-cols-1 grid-rows-1">
<div className="absolute inset-0">
<svg
fill="none"
viewBox="0 0 24 24"
strokeWidth={0.5}
stroke="currentColor"
className="-translate-y-1/4 text-gray-500/5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
/>
</svg>
</div>
<div className="z-20 col-span-full col-start-1 row-span-full row-start-1 flex flex-col items-center justify-center p-8">
<h3 className="mx-2 mb-4 text-xl font-semibold text-gray-400">
No people found
</h3>
<button
id="add_person"
type="button"
className="rounded bg-blue-500 px-4 py-2 font-semibold text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
onClick={() => {
let person = { name: query, disabled: false }
setList((list) => [...list, person])
setSelectedPerson(person)
}}
>
Add "{query}"
</button>
</div>
</div>
</Combobox.Option>
)
}
}

return (
<Combobox.Option
// TODO: `disabled` being required is a bug
disabled={option.disabled}
value={option}
className={({ active }) => {
return classNames(
'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
)
}}
>
<span className="block truncate">{option.name}</span>
</Combobox.Option>
)
}}
</Combobox.Options>
</div>
</div>
Expand Down
100 changes: 59 additions & 41 deletions packages/playground-vue/src/components/combobox/combobox-virtual-with-empty-states.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import { Combobox, ComboboxLabel, ComboboxInput, ComboboxOption, ComboboxOptions, ComboboxButton } from '@headlessui/vue'
import {
Combobox,
ComboboxLabel,
ComboboxInput,
ComboboxOption,
ComboboxOptions,
ComboboxButton,
} from '@headlessui/vue'
type Option = {
name: string
Expand All @@ -9,32 +16,32 @@ type Option = {
}
let list = ref([
{name: 'Alice', disabled: false},
{name: 'Bob', disabled: false},
{name: 'Charlie', disabled: false},
{name: 'David', disabled: false},
{name: 'Eve', disabled: false},
{name: 'Fred', disabled: false},
{name: 'George', disabled: false},
{name: 'Helen', disabled: false},
{name: 'Iris', disabled: false},
{name: 'John', disabled: false},
{name: 'Kate', disabled: false},
{name: 'Linda', disabled: false},
{name: 'Michael', disabled: false},
{name: 'Nancy', disabled: false},
{name: 'Oscar', disabled: true},
{name: 'Peter', disabled: false},
{name: 'Quentin', disabled: false},
{name: 'Robert', disabled: false},
{name: 'Sarah', disabled: false},
{name: 'Thomas', disabled: false},
{name: 'Ursula', disabled: false},
{name: 'Victor', disabled: false},
{name: 'Wendy', disabled: false},
{name: 'Xavier', disabled: false},
{name: 'Yvonne', disabled: false},
{name: 'Zachary', disabled: false},
{ name: 'Alice', disabled: false },
{ name: 'Bob', disabled: false },
{ name: 'Charlie', disabled: false },
{ name: 'David', disabled: false },
{ name: 'Eve', disabled: false },
{ name: 'Fred', disabled: false },
{ name: 'George', disabled: false },
{ name: 'Helen', disabled: false },
{ name: 'Iris', disabled: false },
{ name: 'John', disabled: false },
{ name: 'Kate', disabled: false },
{ name: 'Linda', disabled: false },
{ name: 'Michael', disabled: false },
{ name: 'Nancy', disabled: false },
{ name: 'Oscar', disabled: true },
{ name: 'Peter', disabled: false },
{ name: 'Quentin', disabled: false },
{ name: 'Robert', disabled: false },
{ name: 'Sarah', disabled: false },
{ name: 'Thomas', disabled: false },
{ name: 'Ursula', disabled: false },
{ name: 'Victor', disabled: false },
{ name: 'Wendy', disabled: false },
{ name: 'Xavier', disabled: false },
{ name: 'Yvonne', disabled: false },
{ name: 'Zachary', disabled: false },
])
let emptyOption = { name: 'No results', disabled: true, empty: true }
Expand All @@ -48,18 +55,17 @@ let filtered = computed(() => {
? list.value
: list.value.filter((item) => item.name.toLowerCase().includes(query.value.toLowerCase()))
})
</script>
<template>
<div class="mx-auto max-w-fit">
<div class="py-8 font-mono text-xs">Selected person: {{ selectedPerson?.name ?? "N/A" }}</div>
<div class="py-8 font-mono text-xs">Selected person: {{ selectedPerson?.name ?? 'N/A' }}</div>
<Combobox
:virtual="{
options: filtered.length > 0 ? filtered : [emptyOption],
disabled: (option) => option.disabled || option.empty,
}"
v-model="selectedPerson"
@update:modelValue="() => query = ''"
@update:modelValue="() => (query = '')"
nullable
as="div"
>
Expand All @@ -70,7 +76,7 @@ let filtered = computed(() => {
<div class="relative">
<span class="relative inline-flex flex-row overflow-hidden rounded-md border shadow-sm">
<ComboboxInput
@change="(e) => query = e.target.value"
@change="(e) => (query = e.target.value)"
:displayValue="(option: Option | null) => option?.name ?? ''"
class="border-none px-3 py-1 outline-none"
/>
Expand Down Expand Up @@ -98,24 +104,36 @@ let filtered = computed(() => {
:ref="optionsRef"
:class="[
'shadow-xs max-h-60 rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5',
filtered.length === 0 ? 'overflow-hidden' : 'overflow-auto'
filtered.length === 0 ? 'overflow-hidden' : 'overflow-auto',
]"
v-slot="{ option }"
>
<template v-if="option.empty">
<ComboboxOption
:value="option"
class="relative w-full cursor-default select-none py-2 px-3 focus:outline-none text-center"
class="relative w-full cursor-default select-none px-3 py-2 text-center focus:outline-none"
disabled
>
<div class="grid grid-cols-1 grid-rows-1 h-full relative">
<div class="relative grid h-full grid-cols-1 grid-rows-1">
<div class="absolute inset-0">
<svg fill="none" viewBox="0 0 24 24" stroke-width="0.5" stroke="currentColor" class="text-gray-500/5 -translate-y-1/4">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
<svg
fill="none"
viewBox="0 0 24 24"
stroke-width="0.5"
stroke="currentColor"
class="-translate-y-1/4 text-gray-500/5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
/>
</svg>
</div>
<div class="z-20 col-start-1 row-start-1 col-span-full row-span-full p-8 flex flex-col justify-center items-center">
<h3 class="mx-2 text-xl mb-4 text-gray-400 font-semibold">No people found</h3>
<div
class="z-20 col-span-full col-start-1 row-span-full row-start-1 flex flex-col items-center justify-center p-8"
>
<h3 class="mx-2 mb-4 text-xl font-semibold text-gray-400">No people found</h3>
</div>
</div>
</ComboboxOption>
Expand All @@ -129,11 +147,11 @@ let filtered = computed(() => {
>
<div
:class="[
'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
active ? 'bg-indigo-600 text-white' : 'text-gray-900',
]"
>
<span class='block truncate'>
<span class="block truncate">
{{ option.name }}
</span>
</div>
Expand Down

2 comments on commit 7b30e06

@vercel
Copy link

@vercel vercel bot commented on 7b30e06 Dec 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

headlessui-vue – ./packages/playground-vue

headlessui-vue.vercel.app
headlessui-vue-tailwindlabs.vercel.app
headlessui-vue-git-main-tailwindlabs.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 7b30e06 Dec 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

headlessui-react – ./packages/playground-react

headlessui-react.vercel.app
headlessui-react-tailwindlabs.vercel.app
headlessui-react-git-main-tailwindlabs.vercel.app

Please sign in to comment.