Skip to content

Commit

Permalink
Update popover declaration for compatibility with Preact typings
Browse files Browse the repository at this point in the history
Preact's latest typings allow setting popover to a boolean value, but this still
renders `popover="true"` and "true" is an invalid value. Instead set the value
to "auto" which is the default value [1].

[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover
  • Loading branch information
robertknight committed May 20, 2024
1 parent 297d525 commit 145c7a4
Showing 1 changed file with 4 additions and 6 deletions.
10 changes: 4 additions & 6 deletions src/components/input/SelectNext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import {
useContext,
useId,
useLayoutEffect,
useMemo,
useRef,
useState,
} from 'preact/hooks';
Expand Down Expand Up @@ -286,10 +285,6 @@ function SelectMain<T>({
const listboxId = useId();
const buttonRef = useSyncedRef(elementRef);
const defaultButtonId = useId();
const extraProps = useMemo(
() => (listboxAsPopover ? { popover: '' } : {}),
[listboxAsPopover],
);

useListboxPositioning(
buttonRef,
Expand Down Expand Up @@ -376,7 +371,6 @@ function SelectMain<T>({
</button>
<SelectContext.Provider value={{ selectValue, value }}>
<ul
{...extraProps}
className={classnames(
'absolute z-5 max-h-80 overflow-y-auto',
'rounded border bg-white shadow hover:shadow-md focus-within:shadow-md',
Expand All @@ -397,6 +391,10 @@ function SelectMain<T>({
aria-orientation="vertical"
data-testid="select-listbox"
data-listbox-open={listboxOpen}
// nb. Use `undefined` rather than `false` because Preact doesn't
// handle boolean values correctly for this attribute (it will set
// `popover="false"` instead of removing the attribute).
popover={listboxAsPopover ? 'auto' : undefined}
>
{children}
</ul>
Expand Down

0 comments on commit 145c7a4

Please sign in to comment.