fix(ui): route Select keyboard and ARIA through floating-ui hooks#9179

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexcarpenter merged 1 commit into from
Jul 16, 2026
Merged

fix(ui): route Select keyboard and ARIA through floating-ui hooks #9179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/select-floating-ui-keyboard.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/ui': patch
---

Improve `Select` keyboard and screen reader support by routing navigation through floating-ui's interaction hooks. Pressing `ArrowUp`/`ArrowDown` on a focused, closed `Select` now opens the listbox, and the active option is announced via `aria-activedescendant`. The searchable variant (for example the `PhoneInput` country picker) now exposes a proper combobox: its input is marked `role="combobox"` with `aria-controls`, `aria-autocomplete="list"`, and `aria-activedescendant`, while the plain variant keeps its listbox semantics.
2 changes: 1 addition & 1 deletion packages/ui/bundlewatch.config.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,7 @@
{ "path": "./dist/ui.shared.browser.js", "maxSize": "40KB" },
{ "path": "./dist/framework*.js", "maxSize": "44KB" },
{ "path": "./dist/vendors*.js", "maxSize": "73KB" },
{ "path": "./dist/ui-common*.js", "maxSize": "130KB" },
{ "path": "./dist/ui-common*.js", "maxSize": "132KB" },
{ "path": "./dist/signin*.js", "maxSize": "17KB" },
{ "path": "./dist/signup*.js", "maxSize": "13KB" },
{ "path": "./dist/userprofile*.js", "maxSize": "16KB" },
Expand Down
222 changes: 129 additions & 93 deletions packages/ui/src/elements/Select.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
import { createContextAndHook } from '@clerk/shared/react';
import type { SelectId } from '@clerk/shared/types';
import { FloatingList, useInteractions, useListItem, useListNavigation } from '@floating-ui/react';
import type { PropsWithChildren, ReactElement, ReactNode } from 'react';
import React, { useState } from 'react';
import React from 'react';

import { Button, descriptors, Flex, Icon, Input, Text } from '../customizables';
import { usePopover, useSearchInput } from '../hooks';
Expand All@@ -15,6 +16,7 @@ import { Popover } from './Popover';

type UsePopoverReturn = ReturnType<typeof usePopover>;
type UseSearchInputReturn = ReturnType<typeof useSearchInput>;
type UseInteractionsReturn = ReturnType<typeof useInteractions>;

type Option = { value: string | null; label?: string };

Expand DownExpand Up@@ -44,7 +46,12 @@ type SelectState<O extends Option> = Pick<
buttonRenderOption: RenderOption<O>;
selectedOption: Option | null;
select: (option: O) => void;
focusedItemRef: React.RefObject<HTMLDivElement>;
getReferenceProps: UseInteractionsReturn['getReferenceProps'];
getFloatingProps: UseInteractionsReturn['getFloatingProps'];
getItemProps: UseInteractionsReturn['getItemProps'];
activeIndex: number | null;
setActiveIndex: React.Dispatch<React.SetStateAction<number | null>>;
elementsRef: React.MutableRefObject<Array<HTMLElement | null>>;
onTriggerClick: () => void;
generatedTriggerId: string;
triggerId: string;
Expand DownExpand Up@@ -109,7 +116,25 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
offset: { mainAxis: 6, crossAxis: -1 },
});
const togglePopover = popoverCtx.toggle;
const focusedItemRef = React.useRef<HTMLDivElement>(null);
const { context } = popoverCtx;
const elementsRef = React.useRef<Array<HTMLElement | null>>([]);
const [activeIndex, setActiveIndex] = React.useState<number | null>(null);

// Delegate keyboard interactions to floating-ui so the trigger opens the
// listbox on ArrowUp/ArrowDown and navigation stays a single source of truth.
// `virtual` keeps DOM focus on the listbox (or the search input in combobox
// mode) and exposes the active option via `aria-activedescendant`.
const selectedIndex = options.findIndex(o => o.value === value);
const listNavigation = useListNavigation(context, {
listRef: elementsRef,
activeIndex,
selectedIndex: selectedIndex === -1 ? null : selectedIndex,
onNavigate: setActiveIndex,
loop: true,
virtual: true,
});
const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([listNavigation]);

const generatedTriggerId = React.useId();
const generatedListboxId = React.useId();
const [triggerId, setTriggerId] = React.useState(generatedTriggerId);
Expand DownExpand Up@@ -142,14 +167,19 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
searchInputCtx,
selectedOption: options.find(o => o.value === value) || null,
noResultsMessage,
focusedItemRef,
value,
renderOption: renderOption || defaultRenderOption,
buttonRenderOption: renderOption || defaultButtonRenderOption,
placeholder,
searchPlaceholder,
comparator,
select,
getReferenceProps,
getFloatingProps,
getItemProps,
activeIndex,
setActiveIndex,
elementsRef,
onTriggerClick: togglePopover,
generatedTriggerId,
triggerId,
Expand All@@ -171,41 +201,43 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
type SelectrenderOptionProps<O extends Option> = {
option: Option;
index: number;
id: string;
renderOption: RenderOption<O>;
handleSelect: (option: Option) => void;
getItemProps: UseInteractionsReturn['getItemProps'];
isFocused?: boolean;
isSelected?: boolean;
elementId?: SelectId;
};

const SelectRenderOption = React.memo(
React.forwardRef((props: SelectrenderOptionProps<any>, ref?: React.ForwardedRef<HTMLDivElement>) => {
const { option, renderOption, isSelected, index, handleSelect, isFocused, elementId } = props;
const SelectRenderOption = React.memo((props: SelectrenderOptionProps<any>) => {
const { option, renderOption, isSelected, index, id, handleSelect, getItemProps, isFocused, elementId } = props;
const item = useListItem();

return (
<Flex
ref={ref}
role='option'
aria-selected={isSelected}
sx={{
userSelect: 'none',
cursor: 'pointer',
}}
onClick={() => {
handleSelect(option);
}}
>
{React.cloneElement(renderOption(option, index, isSelected) as React.ReactElement<unknown>, {
//@ts-expect-error
elementDescriptor: descriptors.selectOption,
elementId: descriptors.selectOption.setId(elementId),
'data-selected': isSelected,
'data-focused': isFocused,
})}
</Flex>
);
}),
);
return (
<Flex
ref={item.ref}
id={id}
role='option'
aria-selected={isSelected}
sx={{
userSelect: 'none',
cursor: 'pointer',
}}
{...getItemProps({
onClick: () => handleSelect(option),
})}
>
{React.cloneElement(renderOption(option, index, isSelected) as React.ReactElement<unknown>, {
//@ts-expect-error
elementDescriptor: descriptors.selectOption,
elementId: descriptors.selectOption.setId(elementId),
'data-selected': isSelected,
'data-focused': isFocused,
})}
</Flex>
);
});

const SelectSearchbar = (props: PropsOfComponent<typeof InputWithIcon>) => {
const { sx, ...rest } = props;
Expand DownExpand Up@@ -277,78 +309,72 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
renderOption,
searchPlaceholder,
comparator,
focusedItemRef,
noResultsMessage,
select,
onTriggerClick,
elementId,
triggerId,
generatedListboxId,
setListboxId,
portal,
getFloatingProps,
getItemProps,
activeIndex,
setActiveIndex,
elementsRef,
} = useSelectState();
const { filteredItems: options, searchInputProps } = searchInputCtx;
const [focusedIndex, setFocusedIndex] = useState(0);
const { isOpen, floating, styles, nodeId, context, getFloatingProps } = popoverCtx;
const { isOpen, floating, styles, nodeId, context } = popoverCtx;
const containerRef = React.useRef<HTMLDivElement>(null);
const effectiveListboxId = id ?? generatedListboxId;
const effectiveAriaLabelledBy = ariaLabelledBy ?? (ariaLabel ? undefined : triggerId);
const optionId = (index: number) => `${effectiveListboxId}-option-${index}`;

React.useEffect(() => {
setListboxId(effectiveListboxId);
}, [effectiveListboxId, setListboxId]);

const scrollToItemOnSelectedIndexChange = () => {
if (!isOpen) {
setFocusedIndex(-1);
return;
}
// Jest could not resolve `focusedItemRef.current` so we need to call scrollIntoView with ?.()
focusedItemRef.current?.scrollIntoView?.({ block: 'nearest' });
};

React.useEffect(scrollToItemOnSelectedIndexChange, [focusedIndex, isOpen]);
React.useEffect(() => setFocusedIndex(0), [options.length]);
// Reset the highlighted option to the top of the list whenever the filtered
// results change while searching. Intentionally keyed only on the result
// count so it does not fight floating-ui's highlight-on-open behavior.
React.useEffect(() => {
if (!comparator) {
containerRef?.current?.focus();
}

if (isOpen) {
setFocusedIndex(options.findIndex(o => o.value === value));
// Jest could not resolve `focusedItemRef.current` so we need to call scrollIntoView with ?.()
focusedItemRef.current?.scrollIntoView?.({ block: 'nearest' });
return;
setActiveIndex(0);
}
}, [isOpen]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [options.length]);

const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
if (e.key === 'ArrowUp') {
e.preventDefault();
if (isOpen) {
return setFocusedIndex((i = 0) => (i === 0 ? options.length - 1 : i - 1));
}
return onTriggerClick();
React.useEffect(() => {
if (isOpen && !comparator) {
containerRef.current?.focus();
}
}, [isOpen, comparator]);

if (e.key === 'ArrowDown') {
const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
if (e.key === 'Enter' && activeIndex != null && activeIndex >= 0) {
e.preventDefault();
if (isOpen) {
if (onReachEnd && focusedIndex === options.length - 1) {
onReachEnd();
return;
}
return setFocusedIndex((i = 0) => (i === options.length - 1 ? 0 : i + 1));
const option = options[activeIndex];
if (option) {
select(option);
}
return onTriggerClick();
return;
}

if (e.key === 'Enter' && focusedIndex >= 0) {
e.preventDefault();
return select(options[focusedIndex]);
if (e.key === 'ArrowDown' && onReachEnd && activeIndex === options.length - 1) {
onReachEnd();
}
};

// floating-ui exposes the active option through `aria-activedescendant`, but
// it puts it on this (unfocused) wrapper. Lift it onto the element that
// actually holds focus: the listbox in select mode, the search input in
// combobox mode.
const { 'aria-activedescendant': rawActiveDescendant, ...floatingProps } = getFloatingProps(
popoverCtx.getFloatingProps({ onKeyDown }),
);
// SAFETY: floating-ui types its prop getters as Record<string, unknown>. The
// active descendant is the id string of the active option, or undefined.
const activeDescendant = rawActiveDescendant as string | undefined;

return (
<Popover
nodeId={nodeId}
Expand All@@ -361,7 +387,7 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
elementDescriptor={descriptors.selectOptionsContainer}
elementId={descriptors.selectOptionsContainer.setId(elementId)}
ref={floating}
{...getFloatingProps({ onKeyDown })}
{...floatingProps}
direction='col'
justify='start'
sx={[
Expand All@@ -381,6 +407,11 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
{comparator && (
<SelectSearchbar
placeholder={searchPlaceholder}
role='combobox'
aria-expanded={isOpen}
aria-controls={effectiveListboxId}
aria-autocomplete='list'
aria-activedescendant={activeDescendant}
{...searchInputProps}
/>
)}
Expand All@@ -391,6 +422,7 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
role='listbox'
aria-label={ariaLabel}
aria-labelledby={effectiveAriaLabelledBy}
aria-activedescendant={comparator ? undefined : activeDescendant}
tabIndex={comparator ? undefined : 0}
sx={[
theme => ({
Expand All@@ -404,24 +436,27 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
]}
{...rest}
>
{options.map((option, index) => {
const isFocused = index === focusedIndex;
const isSelected = value === option.value;

return (
<SelectRenderOption
key={option.value}
index={index}
ref={isFocused ? focusedItemRef : undefined}
option={option}
renderOption={renderOption}
isSelected={isSelected}
isFocused={isFocused}
handleSelect={select}
elementId={elementId}
/>
);
})}
<FloatingList elementsRef={elementsRef}>
{options.map((option, index) => {
const isFocused = index === activeIndex;
const isSelected = value === option.value;

return (
<SelectRenderOption
key={option.value}
index={index}
id={optionId(index)}
option={option}
renderOption={renderOption}
getItemProps={getItemProps}
isSelected={isSelected}
isFocused={isFocused}
handleSelect={select}
elementId={elementId}
/>
);
})}
</FloatingList>
{noResultsMessage && options.length === 0 && <SelectNoResults>{noResultsMessage}</SelectNoResults>}
{footer}
</Flex>
Expand All@@ -447,6 +482,7 @@ export const SelectButton = (
generatedTriggerId,
listboxId,
setTriggerId,
getReferenceProps,
} = useSelectState();
const { reference, isOpen } = popoverCtx;
const effectiveTriggerId = id ?? generatedTriggerId;
Expand All@@ -468,7 +504,7 @@ export const SelectButton = (
id={effectiveTriggerId}
variant='outline'
textVariant='buttonLarge'
onClick={onTriggerClick}
{...getReferenceProps({ onClick: onTriggerClick })}
aria-expanded={isOpen}
aria-haspopup='listbox'
aria-controls={ariaControls ?? (isOpen ? listboxId : undefined)}
Expand Down
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
fix(ui): route Select keyboard and ARIA through floating-ui hooks#9179

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

alexcarpenter
merged 1 commit into

from

Jul 16, 2026
 Merged


fix(ui): route Select keyboard and ARIA through floating-ui hooks
#9179
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/select-floating-ui-keyboard.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/ui': patch
---

Improve `Select` keyboard and screen reader support by routing navigation through floating-ui's interaction hooks. Pressing `ArrowUp`/`ArrowDown` on a focused, closed `Select` now opens the listbox, and the active option is announced via `aria-activedescendant`. The searchable variant (for example the `PhoneInput` country picker) now exposes a proper combobox: its input is marked `role="combobox"` with `aria-controls`, `aria-autocomplete="list"`, and `aria-activedescendant`, while the plain variant keeps its listbox semantics.

2 changes: 1 addition & 1 deletion
packages/ui/bundlewatch.config.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,7 @@
 { "path": "./dist/ui.shared.browser.js", "maxSize": "40KB" },
 { "path": "./dist/framework*.js", "maxSize": "44KB" },
 { "path": "./dist/vendors*.js", "maxSize": "73KB" },
 { "path": "./dist/ui-common*.js", "maxSize": "130KB" },
 { "path": "./dist/ui-common*.js", "maxSize": "132KB" },
 { "path": "./dist/signin*.js", "maxSize": "17KB" },
 { "path": "./dist/signup*.js", "maxSize": "13KB" },
 { "path": "./dist/userprofile*.js", "maxSize": "16KB" },
Expand Down

222 changes: 129 additions & 93 deletions
packages/ui/src/elements/Select.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
import { createContextAndHook } from '@clerk/shared/react';
import type { SelectId } from '@clerk/shared/types';
import { FloatingList, useInteractions, useListItem, useListNavigation } from '@floating-ui/react';
import type { PropsWithChildren, ReactElement, ReactNode } from 'react';
import React, { useState } from 'react';
import React from 'react';

import { Button, descriptors, Flex, Icon, Input, Text } from '../customizables';
import { usePopover, useSearchInput } from '../hooks';
Expand All@@ -15,6 +16,7 @@ import { Popover } from './Popover';

type UsePopoverReturn = ReturnType<typeof usePopover>;
type UseSearchInputReturn = ReturnType<typeof useSearchInput>;
type UseInteractionsReturn = ReturnType<typeof useInteractions>;

type Option = { value: string | null; label?: string };

Expand DownExpand Up@@ -44,7 +46,12 @@ type SelectState<O extends Option> = Pick<
 buttonRenderOption: RenderOption<O>;
 selectedOption: Option | null;
 select: (option: O) => void;
 focusedItemRef: React.RefObject<HTMLDivElement>;
 getReferenceProps: UseInteractionsReturn['getReferenceProps'];
 getFloatingProps: UseInteractionsReturn['getFloatingProps'];
 getItemProps: UseInteractionsReturn['getItemProps'];
 activeIndex: number | null;
 setActiveIndex: React.Dispatch<React.SetStateAction<number | null>>;
 elementsRef: React.MutableRefObject<Array<HTMLElement | null>>;
 onTriggerClick: () => void;
 generatedTriggerId: string;
 triggerId: string;
Expand DownExpand Up@@ -109,7 +116,25 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
 offset: { mainAxis: 6, crossAxis: -1 },
 });
 const togglePopover = popoverCtx.toggle;
 const focusedItemRef = React.useRef<HTMLDivElement>(null);
 const { context } = popoverCtx;
 const elementsRef = React.useRef<Array<HTMLElement | null>>([]);
 const [activeIndex, setActiveIndex] = React.useState<number | null>(null);

 // Delegate keyboard interactions to floating-ui so the trigger opens the
 // listbox on ArrowUp/ArrowDown and navigation stays a single source of truth.
 // `virtual` keeps DOM focus on the listbox (or the search input in combobox
 // mode) and exposes the active option via `aria-activedescendant`.
 const selectedIndex = options.findIndex(o => o.value === value);
 const listNavigation = useListNavigation(context, {
 listRef: elementsRef,
 activeIndex,
 selectedIndex: selectedIndex === -1 ? null : selectedIndex,
 onNavigate: setActiveIndex,
 loop: true,
 virtual: true,
 });
 const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([listNavigation]);

 const generatedTriggerId = React.useId();
 const generatedListboxId = React.useId();
 const [triggerId, setTriggerId] = React.useState(generatedTriggerId);
Expand DownExpand Up@@ -142,14 +167,19 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
 searchInputCtx,
 selectedOption: options.find(o => o.value === value) || null,
 noResultsMessage,
 focusedItemRef,
 value,
 renderOption: renderOption || defaultRenderOption,
 buttonRenderOption: renderOption || defaultButtonRenderOption,
 placeholder,
 searchPlaceholder,
 comparator,
 select,
 getReferenceProps,
 getFloatingProps,
 getItemProps,
 activeIndex,
 setActiveIndex,
 elementsRef,
 onTriggerClick: togglePopover,
 generatedTriggerId,
 triggerId,
Expand All@@ -171,41 +201,43 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
type SelectrenderOptionProps<O extends Option> = {
 option: Option;
 index: number;
 id: string;
 renderOption: RenderOption<O>;
 handleSelect: (option: Option) => void;
 getItemProps: UseInteractionsReturn['getItemProps'];
 isFocused?: boolean;
 isSelected?: boolean;
 elementId?: SelectId;
};

const SelectRenderOption = React.memo(
React.forwardRef((props: SelectrenderOptionProps<any>, ref?: React.ForwardedRef<HTMLDivElement>) => {
const { option, renderOption, isSelected, index, handleSelect, isFocused, elementId } = props;
const SelectRenderOption = React.memo((props: SelectrenderOptionProps<any>) => {
const { option, renderOption, isSelected, index, id, handleSelect, getItemProps, isFocused, elementId } = props;
 const item = useListItem();

return (
<Flex
ref={ref}
 role='option'
 aria-selected={isSelected}
 sx={{
 userSelect: 'none',
 cursor: 'pointer',
}}
 onClick={() => {
 handleSelect(option);
}}
>
 {React.cloneElement(renderOption(option, index, isSelected) as React.ReactElement<unknown>, {
 //@ts-expect-error
 elementDescriptor: descriptors.selectOption,
 elementId: descriptors.selectOption.setId(elementId),
 'data-selected': isSelected,
'data-focused': isFocused,
})}
</Flex>
);
}),
);
 return (
 <Flex
 ref={item.ref}
id={id}
role='option'
aria-selected={isSelected}
sx={{
userSelect: 'none',
cursor: 'pointer',
}}
{...getItemProps({
onClick: () => handleSelect(option),
})}
>
{React.cloneElement(renderOption(option, index, isSelected) as React.ReactElement<unknown>, {
//@ts-expect-error
elementDescriptor: descriptors.selectOption,
elementId: descriptors.selectOption.setId(elementId),
 'data-selected': isSelected,
'data-focused': isFocused,
})}
</Flex>
);
});

const SelectSearchbar = (props: PropsOfComponent<typeof InputWithIcon>) => {
 const { sx, ...rest } = props;
Expand DownExpand Up@@ -277,78 +309,72 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 renderOption,
 searchPlaceholder,
 comparator,
 focusedItemRef,
 noResultsMessage,
 select,
 onTriggerClick,
 elementId,
 triggerId,
 generatedListboxId,
 setListboxId,
 portal,
 getFloatingProps,
 getItemProps,
 activeIndex,
 setActiveIndex,
 elementsRef,
 } = useSelectState();
 const { filteredItems: options, searchInputProps } = searchInputCtx;
 const [focusedIndex, setFocusedIndex] = useState(0);
 const { isOpen, floating, styles, nodeId, context, getFloatingProps } = popoverCtx;
 const { isOpen, floating, styles, nodeId, context } = popoverCtx;
 const containerRef = React.useRef<HTMLDivElement>(null);
 const effectiveListboxId = id ?? generatedListboxId;
 const effectiveAriaLabelledBy = ariaLabelledBy ?? (ariaLabel ? undefined : triggerId);
 const optionId = (index: number) => `${effectiveListboxId}-option-${index}`;

 React.useEffect(() => {
 setListboxId(effectiveListboxId);
 }, [effectiveListboxId, setListboxId]);

 const scrollToItemOnSelectedIndexChange = () => {
 if (!isOpen) {
 setFocusedIndex(-1);
 return;
 }
 // Jest could not resolve `focusedItemRef.current` so we need to call scrollIntoView with ?.()
 focusedItemRef.current?.scrollIntoView?.({ block: 'nearest' });
 };

 React.useEffect(scrollToItemOnSelectedIndexChange, [focusedIndex, isOpen]);
 React.useEffect(() => setFocusedIndex(0), [options.length]);
 // Reset the highlighted option to the top of the list whenever the filtered
 // results change while searching. Intentionally keyed only on the result
 // count so it does not fight floating-ui's highlight-on-open behavior.
 React.useEffect(() => {
 if (!comparator) {
 containerRef?.current?.focus();
 }

 if (isOpen) {
 setFocusedIndex(options.findIndex(o => o.value === value));
 // Jest could not resolve `focusedItemRef.current` so we need to call scrollIntoView with ?.()
 focusedItemRef.current?.scrollIntoView?.({ block: 'nearest' });
 return;
 setActiveIndex(0);
 }
 }, [isOpen]);
 // eslint-disable-next-line react-hooks/exhaustive-deps
 }, [options.length]);

 const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
 if (e.key === 'ArrowUp') {
 e.preventDefault();
 if (isOpen) {
 return setFocusedIndex((i = 0) => (i === 0 ? options.length - 1 : i - 1));
 }
 return onTriggerClick();
 React.useEffect(() => {
 if (isOpen && !comparator) {
 containerRef.current?.focus();
 }
 }, [isOpen, comparator]);

 if (e.key === 'ArrowDown') {
 const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
 if (e.key === 'Enter' && activeIndex != null && activeIndex >= 0) {
 e.preventDefault();
 if (isOpen) {
 if (onReachEnd && focusedIndex === options.length - 1) {
 onReachEnd();
 return;
 }
 return setFocusedIndex((i = 0) => (i === options.length - 1 ? 0 : i + 1));
 const option = options[activeIndex];
 if (option) {
 select(option);
 }
 return onTriggerClick();
 return;
 }

 if (e.key === 'Enter' && focusedIndex >= 0) {
 e.preventDefault();
 return select(options[focusedIndex]);
 if (e.key === 'ArrowDown' && onReachEnd && activeIndex === options.length - 1) {
 onReachEnd();
 }
 };

 // floating-ui exposes the active option through `aria-activedescendant`, but
 // it puts it on this (unfocused) wrapper. Lift it onto the element that
 // actually holds focus: the listbox in select mode, the search input in
 // combobox mode.
 const { 'aria-activedescendant': rawActiveDescendant, ...floatingProps } = getFloatingProps(
 popoverCtx.getFloatingProps({ onKeyDown }),
 );
 // SAFETY: floating-ui types its prop getters as Record<string, unknown>. The
 // active descendant is the id string of the active option, or undefined.
 const activeDescendant = rawActiveDescendant as string | undefined;

 return (
 <Popover
 nodeId={nodeId}
Expand All@@ -361,7 +387,7 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 elementDescriptor={descriptors.selectOptionsContainer}
 elementId={descriptors.selectOptionsContainer.setId(elementId)}
 ref={floating}
 {...getFloatingProps({ onKeyDown })}
 {...floatingProps}
 direction='col'
 justify='start'
 sx={[
Expand All@@ -381,6 +407,11 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 {comparator && (
 <SelectSearchbar
 placeholder={searchPlaceholder}
 role='combobox'
 aria-expanded={isOpen}
 aria-controls={effectiveListboxId}
 aria-autocomplete='list'
 aria-activedescendant={activeDescendant}
 {...searchInputProps}
 />
 )}
Expand All@@ -391,6 +422,7 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 role='listbox'
 aria-label={ariaLabel}
 aria-labelledby={effectiveAriaLabelledBy}
 aria-activedescendant={comparator ? undefined : activeDescendant}
 tabIndex={comparator ? undefined : 0}
 sx={[
 theme => ({
Expand All@@ -404,24 +436,27 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 ]}
 {...rest}
 >
 {options.map((option, index) => {
 const isFocused = index === focusedIndex;
 const isSelected = value === option.value;

 return (
 <SelectRenderOption
 key={option.value}
 index={index}
 ref={isFocused ? focusedItemRef : undefined}
 option={option}
 renderOption={renderOption}
 isSelected={isSelected}
 isFocused={isFocused}
 handleSelect={select}
 elementId={elementId}
 />
 );
 })}
 <FloatingList elementsRef={elementsRef}>
 {options.map((option, index) => {
 const isFocused = index === activeIndex;
 const isSelected = value === option.value;

 return (
 <SelectRenderOption
 key={option.value}
 index={index}
 id={optionId(index)}
 option={option}
 renderOption={renderOption}
 getItemProps={getItemProps}
 isSelected={isSelected}
 isFocused={isFocused}
 handleSelect={select}
 elementId={elementId}
 />
 );
 })}
 </FloatingList>
 {noResultsMessage && options.length === 0 && <SelectNoResults>{noResultsMessage}</SelectNoResults>}
 {footer}
 </Flex>
Expand All@@ -447,6 +482,7 @@ export const SelectButton = (
 generatedTriggerId,
 listboxId,
 setTriggerId,
 getReferenceProps,
 } = useSelectState();
 const { reference, isOpen } = popoverCtx;
 const effectiveTriggerId = id ?? generatedTriggerId;
Expand All@@ -468,7 +504,7 @@ export const SelectButton = (
 id={effectiveTriggerId}
 variant='outline'
 textVariant='buttonLarge'
onClick={onTriggerClick}
{...getReferenceProps({ onClick: onTriggerClick })}
 aria-expanded={isOpen}
 aria-haspopup='listbox'
 aria-controls={ariaControls ?? (isOpen ? listboxId : undefined)}
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(ui): route Select keyboard and ARIA through floating-ui hooks#9179

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

alexcarpenter
merged 1 commit into

from

Jul 16, 2026
 Merged


fix(ui): route Select keyboard and ARIA through floating-ui hooks
#9179
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/select-floating-ui-keyboard.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/ui': patch
---

Improve `Select` keyboard and screen reader support by routing navigation through floating-ui's interaction hooks. Pressing `ArrowUp`/`ArrowDown` on a focused, closed `Select` now opens the listbox, and the active option is announced via `aria-activedescendant`. The searchable variant (for example the `PhoneInput` country picker) now exposes a proper combobox: its input is marked `role="combobox"` with `aria-controls`, `aria-autocomplete="list"`, and `aria-activedescendant`, while the plain variant keeps its listbox semantics.

2 changes: 1 addition & 1 deletion
packages/ui/bundlewatch.config.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,7 @@
 { "path": "./dist/ui.shared.browser.js", "maxSize": "40KB" },
 { "path": "./dist/framework*.js", "maxSize": "44KB" },
 { "path": "./dist/vendors*.js", "maxSize": "73KB" },
 { "path": "./dist/ui-common*.js", "maxSize": "130KB" },
 { "path": "./dist/ui-common*.js", "maxSize": "132KB" },
 { "path": "./dist/signin*.js", "maxSize": "17KB" },
 { "path": "./dist/signup*.js", "maxSize": "13KB" },
 { "path": "./dist/userprofile*.js", "maxSize": "16KB" },
Expand Down

222 changes: 129 additions & 93 deletions
packages/ui/src/elements/Select.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
import { createContextAndHook } from '@clerk/shared/react';
import type { SelectId } from '@clerk/shared/types';
import { FloatingList, useInteractions, useListItem, useListNavigation } from '@floating-ui/react';
import type { PropsWithChildren, ReactElement, ReactNode } from 'react';
import React, { useState } from 'react';
import React from 'react';

import { Button, descriptors, Flex, Icon, Input, Text } from '../customizables';
import { usePopover, useSearchInput } from '../hooks';
Expand All@@ -15,6 +16,7 @@ import { Popover } from './Popover';

type UsePopoverReturn = ReturnType<typeof usePopover>;
type UseSearchInputReturn = ReturnType<typeof useSearchInput>;
type UseInteractionsReturn = ReturnType<typeof useInteractions>;

type Option = { value: string | null; label?: string };

Expand DownExpand Up@@ -44,7 +46,12 @@ type SelectState<O extends Option> = Pick<
 buttonRenderOption: RenderOption<O>;
 selectedOption: Option | null;
 select: (option: O) => void;
 focusedItemRef: React.RefObject<HTMLDivElement>;
 getReferenceProps: UseInteractionsReturn['getReferenceProps'];
 getFloatingProps: UseInteractionsReturn['getFloatingProps'];
 getItemProps: UseInteractionsReturn['getItemProps'];
 activeIndex: number | null;
 setActiveIndex: React.Dispatch<React.SetStateAction<number | null>>;
 elementsRef: React.MutableRefObject<Array<HTMLElement | null>>;
 onTriggerClick: () => void;
 generatedTriggerId: string;
 triggerId: string;
Expand DownExpand Up@@ -109,7 +116,25 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
 offset: { mainAxis: 6, crossAxis: -1 },
 });
 const togglePopover = popoverCtx.toggle;
 const focusedItemRef = React.useRef<HTMLDivElement>(null);
 const { context } = popoverCtx;
 const elementsRef = React.useRef<Array<HTMLElement | null>>([]);
 const [activeIndex, setActiveIndex] = React.useState<number | null>(null);

 // Delegate keyboard interactions to floating-ui so the trigger opens the
 // listbox on ArrowUp/ArrowDown and navigation stays a single source of truth.
 // `virtual` keeps DOM focus on the listbox (or the search input in combobox
 // mode) and exposes the active option via `aria-activedescendant`.
 const selectedIndex = options.findIndex(o => o.value === value);
 const listNavigation = useListNavigation(context, {
 listRef: elementsRef,
 activeIndex,
 selectedIndex: selectedIndex === -1 ? null : selectedIndex,
 onNavigate: setActiveIndex,
 loop: true,
 virtual: true,
 });
 const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([listNavigation]);

 const generatedTriggerId = React.useId();
 const generatedListboxId = React.useId();
 const [triggerId, setTriggerId] = React.useState(generatedTriggerId);
Expand DownExpand Up@@ -142,14 +167,19 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
 searchInputCtx,
 selectedOption: options.find(o => o.value === value) || null,
 noResultsMessage,
 focusedItemRef,
 value,
 renderOption: renderOption || defaultRenderOption,
 buttonRenderOption: renderOption || defaultButtonRenderOption,
 placeholder,
 searchPlaceholder,
 comparator,
 select,
 getReferenceProps,
 getFloatingProps,
 getItemProps,
 activeIndex,
 setActiveIndex,
 elementsRef,
 onTriggerClick: togglePopover,
 generatedTriggerId,
 triggerId,
Expand All@@ -171,41 +201,43 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
type SelectrenderOptionProps<O extends Option> = {
 option: Option;
 index: number;
 id: string;
 renderOption: RenderOption<O>;
 handleSelect: (option: Option) => void;
 getItemProps: UseInteractionsReturn['getItemProps'];
 isFocused?: boolean;
 isSelected?: boolean;
 elementId?: SelectId;
};

const SelectRenderOption = React.memo(
React.forwardRef((props: SelectrenderOptionProps<any>, ref?: React.ForwardedRef<HTMLDivElement>) => {
const { option, renderOption, isSelected, index, handleSelect, isFocused, elementId } = props;
const SelectRenderOption = React.memo((props: SelectrenderOptionProps<any>) => {
const { option, renderOption, isSelected, index, id, handleSelect, getItemProps, isFocused, elementId } = props;
 const item = useListItem();

return (
<Flex
ref={ref}
 role='option'
 aria-selected={isSelected}
 sx={{
 userSelect: 'none',
 cursor: 'pointer',
}}
 onClick={() => {
 handleSelect(option);
}}
>
 {React.cloneElement(renderOption(option, index, isSelected) as React.ReactElement<unknown>, {
 //@ts-expect-error
 elementDescriptor: descriptors.selectOption,
 elementId: descriptors.selectOption.setId(elementId),
 'data-selected': isSelected,
'data-focused': isFocused,
})}
</Flex>
);
}),
);
 return (
 <Flex
 ref={item.ref}
id={id}
role='option'
aria-selected={isSelected}
sx={{
userSelect: 'none',
cursor: 'pointer',
}}
{...getItemProps({
onClick: () => handleSelect(option),
})}
>
{React.cloneElement(renderOption(option, index, isSelected) as React.ReactElement<unknown>, {
//@ts-expect-error
elementDescriptor: descriptors.selectOption,
elementId: descriptors.selectOption.setId(elementId),
 'data-selected': isSelected,
'data-focused': isFocused,
})}
</Flex>
);
});

const SelectSearchbar = (props: PropsOfComponent<typeof InputWithIcon>) => {
 const { sx, ...rest } = props;
Expand DownExpand Up@@ -277,78 +309,72 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 renderOption,
 searchPlaceholder,
 comparator,
 focusedItemRef,
 noResultsMessage,
 select,
 onTriggerClick,
 elementId,
 triggerId,
 generatedListboxId,
 setListboxId,
 portal,
 getFloatingProps,
 getItemProps,
 activeIndex,
 setActiveIndex,
 elementsRef,
 } = useSelectState();
 const { filteredItems: options, searchInputProps } = searchInputCtx;
 const [focusedIndex, setFocusedIndex] = useState(0);
 const { isOpen, floating, styles, nodeId, context, getFloatingProps } = popoverCtx;
 const { isOpen, floating, styles, nodeId, context } = popoverCtx;
 const containerRef = React.useRef<HTMLDivElement>(null);
 const effectiveListboxId = id ?? generatedListboxId;
 const effectiveAriaLabelledBy = ariaLabelledBy ?? (ariaLabel ? undefined : triggerId);
 const optionId = (index: number) => `${effectiveListboxId}-option-${index}`;

 React.useEffect(() => {
 setListboxId(effectiveListboxId);
 }, [effectiveListboxId, setListboxId]);

 const scrollToItemOnSelectedIndexChange = () => {
 if (!isOpen) {
 setFocusedIndex(-1);
 return;
 }
 // Jest could not resolve `focusedItemRef.current` so we need to call scrollIntoView with ?.()
 focusedItemRef.current?.scrollIntoView?.({ block: 'nearest' });
 };

 React.useEffect(scrollToItemOnSelectedIndexChange, [focusedIndex, isOpen]);
 React.useEffect(() => setFocusedIndex(0), [options.length]);
 // Reset the highlighted option to the top of the list whenever the filtered
 // results change while searching. Intentionally keyed only on the result
 // count so it does not fight floating-ui's highlight-on-open behavior.
 React.useEffect(() => {
 if (!comparator) {
 containerRef?.current?.focus();
 }

 if (isOpen) {
 setFocusedIndex(options.findIndex(o => o.value === value));
 // Jest could not resolve `focusedItemRef.current` so we need to call scrollIntoView with ?.()
 focusedItemRef.current?.scrollIntoView?.({ block: 'nearest' });
 return;
 setActiveIndex(0);
 }
 }, [isOpen]);
 // eslint-disable-next-line react-hooks/exhaustive-deps
 }, [options.length]);

 const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
 if (e.key === 'ArrowUp') {
 e.preventDefault();
 if (isOpen) {
 return setFocusedIndex((i = 0) => (i === 0 ? options.length - 1 : i - 1));
 }
 return onTriggerClick();
 React.useEffect(() => {
 if (isOpen && !comparator) {
 containerRef.current?.focus();
 }
 }, [isOpen, comparator]);

 if (e.key === 'ArrowDown') {
 const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
 if (e.key === 'Enter' && activeIndex != null && activeIndex >= 0) {
 e.preventDefault();
 if (isOpen) {
 if (onReachEnd && focusedIndex === options.length - 1) {
 onReachEnd();
 return;
 }
 return setFocusedIndex((i = 0) => (i === options.length - 1 ? 0 : i + 1));
 const option = options[activeIndex];
 if (option) {
 select(option);
 }
 return onTriggerClick();
 return;
 }

 if (e.key === 'Enter' && focusedIndex >= 0) {
 e.preventDefault();
 return select(options[focusedIndex]);
 if (e.key === 'ArrowDown' && onReachEnd && activeIndex === options.length - 1) {
 onReachEnd();
 }
 };

 // floating-ui exposes the active option through `aria-activedescendant`, but
 // it puts it on this (unfocused) wrapper. Lift it onto the element that
 // actually holds focus: the listbox in select mode, the search input in
 // combobox mode.
 const { 'aria-activedescendant': rawActiveDescendant, ...floatingProps } = getFloatingProps(
 popoverCtx.getFloatingProps({ onKeyDown }),
 );
 // SAFETY: floating-ui types its prop getters as Record<string, unknown>. The
 // active descendant is the id string of the active option, or undefined.
 const activeDescendant = rawActiveDescendant as string | undefined;

 return (
 <Popover
 nodeId={nodeId}
Expand All@@ -361,7 +387,7 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 elementDescriptor={descriptors.selectOptionsContainer}
 elementId={descriptors.selectOptionsContainer.setId(elementId)}
 ref={floating}
 {...getFloatingProps({ onKeyDown })}
 {...floatingProps}
 direction='col'
 justify='start'
 sx={[
Expand All@@ -381,6 +407,11 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 {comparator && (
 <SelectSearchbar
 placeholder={searchPlaceholder}
 role='combobox'
 aria-expanded={isOpen}
 aria-controls={effectiveListboxId}
 aria-autocomplete='list'
 aria-activedescendant={activeDescendant}
 {...searchInputProps}
 />
 )}
Expand All@@ -391,6 +422,7 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 role='listbox'
 aria-label={ariaLabel}
 aria-labelledby={effectiveAriaLabelledBy}
 aria-activedescendant={comparator ? undefined : activeDescendant}
 tabIndex={comparator ? undefined : 0}
 sx={[
 theme => ({
Expand All@@ -404,24 +436,27 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 ]}
 {...rest}
 >
 {options.map((option, index) => {
 const isFocused = index === focusedIndex;
 const isSelected = value === option.value;

 return (
 <SelectRenderOption
 key={option.value}
 index={index}
 ref={isFocused ? focusedItemRef : undefined}
 option={option}
 renderOption={renderOption}
 isSelected={isSelected}
 isFocused={isFocused}
 handleSelect={select}
 elementId={elementId}
 />
 );
 })}
 <FloatingList elementsRef={elementsRef}>
 {options.map((option, index) => {
 const isFocused = index === activeIndex;
 const isSelected = value === option.value;

 return (
 <SelectRenderOption
 key={option.value}
 index={index}
 id={optionId(index)}
 option={option}
 renderOption={renderOption}
 getItemProps={getItemProps}
 isSelected={isSelected}
 isFocused={isFocused}
 handleSelect={select}
 elementId={elementId}
 />
 );
 })}
 </FloatingList>
 {noResultsMessage && options.length === 0 && <SelectNoResults>{noResultsMessage}</SelectNoResults>}
 {footer}
 </Flex>
Expand All@@ -447,6 +482,7 @@ export const SelectButton = (
 generatedTriggerId,
 listboxId,
 setTriggerId,
 getReferenceProps,
 } = useSelectState();
 const { reference, isOpen } = popoverCtx;
 const effectiveTriggerId = id ?? generatedTriggerId;
Expand All@@ -468,7 +504,7 @@ export const SelectButton = (
 id={effectiveTriggerId}
 variant='outline'
 textVariant='buttonLarge'
onClick={onTriggerClick}
{...getReferenceProps({ onClick: onTriggerClick })}
 aria-expanded={isOpen}
 aria-haspopup='listbox'
 aria-controls={ariaControls ?? (isOpen ? listboxId : undefined)}
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(ui): route Select keyboard and ARIA through floating-ui hooks#9179

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

alexcarpenter
merged 1 commit into

from

Jul 16, 2026
 Merged


fix(ui): route Select keyboard and ARIA through floating-ui hooks
#9179
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/select-floating-ui-keyboard.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/ui': patch
---

Improve `Select` keyboard and screen reader support by routing navigation through floating-ui's interaction hooks. Pressing `ArrowUp`/`ArrowDown` on a focused, closed `Select` now opens the listbox, and the active option is announced via `aria-activedescendant`. The searchable variant (for example the `PhoneInput` country picker) now exposes a proper combobox: its input is marked `role="combobox"` with `aria-controls`, `aria-autocomplete="list"`, and `aria-activedescendant`, while the plain variant keeps its listbox semantics.

2 changes: 1 addition & 1 deletion
packages/ui/bundlewatch.config.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,7 @@
 { "path": "./dist/ui.shared.browser.js", "maxSize": "40KB" },
 { "path": "./dist/framework*.js", "maxSize": "44KB" },
 { "path": "./dist/vendors*.js", "maxSize": "73KB" },
 { "path": "./dist/ui-common*.js", "maxSize": "130KB" },
 { "path": "./dist/ui-common*.js", "maxSize": "132KB" },
 { "path": "./dist/signin*.js", "maxSize": "17KB" },
 { "path": "./dist/signup*.js", "maxSize": "13KB" },
 { "path": "./dist/userprofile*.js", "maxSize": "16KB" },
Expand Down

222 changes: 129 additions & 93 deletions
packages/ui/src/elements/Select.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
import { createContextAndHook } from '@clerk/shared/react';
import type { SelectId } from '@clerk/shared/types';
import { FloatingList, useInteractions, useListItem, useListNavigation } from '@floating-ui/react';
import type { PropsWithChildren, ReactElement, ReactNode } from 'react';
import React, { useState } from 'react';
import React from 'react';

import { Button, descriptors, Flex, Icon, Input, Text } from '../customizables';
import { usePopover, useSearchInput } from '../hooks';
Expand All@@ -15,6 +16,7 @@ import { Popover } from './Popover';

type UsePopoverReturn = ReturnType<typeof usePopover>;
type UseSearchInputReturn = ReturnType<typeof useSearchInput>;
type UseInteractionsReturn = ReturnType<typeof useInteractions>;

type Option = { value: string | null; label?: string };

Expand DownExpand Up@@ -44,7 +46,12 @@ type SelectState<O extends Option> = Pick<
 buttonRenderOption: RenderOption<O>;
 selectedOption: Option | null;
 select: (option: O) => void;
 focusedItemRef: React.RefObject<HTMLDivElement>;
 getReferenceProps: UseInteractionsReturn['getReferenceProps'];
 getFloatingProps: UseInteractionsReturn['getFloatingProps'];
 getItemProps: UseInteractionsReturn['getItemProps'];
 activeIndex: number | null;
 setActiveIndex: React.Dispatch<React.SetStateAction<number | null>>;
 elementsRef: React.MutableRefObject<Array<HTMLElement | null>>;
 onTriggerClick: () => void;
 generatedTriggerId: string;
 triggerId: string;
Expand DownExpand Up@@ -109,7 +116,25 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
 offset: { mainAxis: 6, crossAxis: -1 },
 });
 const togglePopover = popoverCtx.toggle;
 const focusedItemRef = React.useRef<HTMLDivElement>(null);
 const { context } = popoverCtx;
 const elementsRef = React.useRef<Array<HTMLElement | null>>([]);
 const [activeIndex, setActiveIndex] = React.useState<number | null>(null);

 // Delegate keyboard interactions to floating-ui so the trigger opens the
 // listbox on ArrowUp/ArrowDown and navigation stays a single source of truth.
 // `virtual` keeps DOM focus on the listbox (or the search input in combobox
 // mode) and exposes the active option via `aria-activedescendant`.
 const selectedIndex = options.findIndex(o => o.value === value);
 const listNavigation = useListNavigation(context, {
 listRef: elementsRef,
 activeIndex,
 selectedIndex: selectedIndex === -1 ? null : selectedIndex,
 onNavigate: setActiveIndex,
 loop: true,
 virtual: true,
 });
 const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([listNavigation]);

 const generatedTriggerId = React.useId();
 const generatedListboxId = React.useId();
 const [triggerId, setTriggerId] = React.useState(generatedTriggerId);
Expand DownExpand Up@@ -142,14 +167,19 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
 searchInputCtx,
 selectedOption: options.find(o => o.value === value) || null,
 noResultsMessage,
 focusedItemRef,
 value,
 renderOption: renderOption || defaultRenderOption,
 buttonRenderOption: renderOption || defaultButtonRenderOption,
 placeholder,
 searchPlaceholder,
 comparator,
 select,
 getReferenceProps,
 getFloatingProps,
 getItemProps,
 activeIndex,
 setActiveIndex,
 elementsRef,
 onTriggerClick: togglePopover,
 generatedTriggerId,
 triggerId,
Expand All@@ -171,41 +201,43 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
type SelectrenderOptionProps<O extends Option> = {
 option: Option;
 index: number;
 id: string;
 renderOption: RenderOption<O>;
 handleSelect: (option: Option) => void;
 getItemProps: UseInteractionsReturn['getItemProps'];
 isFocused?: boolean;
 isSelected?: boolean;
 elementId?: SelectId;
};

const SelectRenderOption = React.memo(
React.forwardRef((props: SelectrenderOptionProps<any>, ref?: React.ForwardedRef<HTMLDivElement>) => {
const { option, renderOption, isSelected, index, handleSelect, isFocused, elementId } = props;
const SelectRenderOption = React.memo((props: SelectrenderOptionProps<any>) => {
const { option, renderOption, isSelected, index, id, handleSelect, getItemProps, isFocused, elementId } = props;
 const item = useListItem();

return (
<Flex
ref={ref}
 role='option'
 aria-selected={isSelected}
 sx={{
 userSelect: 'none',
 cursor: 'pointer',
}}
 onClick={() => {
 handleSelect(option);
}}
>
 {React.cloneElement(renderOption(option, index, isSelected) as React.ReactElement<unknown>, {
 //@ts-expect-error
 elementDescriptor: descriptors.selectOption,
 elementId: descriptors.selectOption.setId(elementId),
 'data-selected': isSelected,
'data-focused': isFocused,
})}
</Flex>
);
}),
);
 return (
 <Flex
 ref={item.ref}
id={id}
role='option'
aria-selected={isSelected}
sx={{
userSelect: 'none',
cursor: 'pointer',
}}
{...getItemProps({
onClick: () => handleSelect(option),
})}
>
{React.cloneElement(renderOption(option, index, isSelected) as React.ReactElement<unknown>, {
//@ts-expect-error
elementDescriptor: descriptors.selectOption,
elementId: descriptors.selectOption.setId(elementId),
 'data-selected': isSelected,
'data-focused': isFocused,
})}
</Flex>
);
});

const SelectSearchbar = (props: PropsOfComponent<typeof InputWithIcon>) => {
 const { sx, ...rest } = props;
Expand DownExpand Up@@ -277,78 +309,72 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 renderOption,
 searchPlaceholder,
 comparator,
 focusedItemRef,
 noResultsMessage,
 select,
 onTriggerClick,
 elementId,
 triggerId,
 generatedListboxId,
 setListboxId,
 portal,
 getFloatingProps,
 getItemProps,
 activeIndex,
 setActiveIndex,
 elementsRef,
 } = useSelectState();
 const { filteredItems: options, searchInputProps } = searchInputCtx;
 const [focusedIndex, setFocusedIndex] = useState(0);
 const { isOpen, floating, styles, nodeId, context, getFloatingProps } = popoverCtx;
 const { isOpen, floating, styles, nodeId, context } = popoverCtx;
 const containerRef = React.useRef<HTMLDivElement>(null);
 const effectiveListboxId = id ?? generatedListboxId;
 const effectiveAriaLabelledBy = ariaLabelledBy ?? (ariaLabel ? undefined : triggerId);
 const optionId = (index: number) => `${effectiveListboxId}-option-${index}`;

 React.useEffect(() => {
 setListboxId(effectiveListboxId);
 }, [effectiveListboxId, setListboxId]);

 const scrollToItemOnSelectedIndexChange = () => {
 if (!isOpen) {
 setFocusedIndex(-1);
 return;
 }
 // Jest could not resolve `focusedItemRef.current` so we need to call scrollIntoView with ?.()
 focusedItemRef.current?.scrollIntoView?.({ block: 'nearest' });
 };

 React.useEffect(scrollToItemOnSelectedIndexChange, [focusedIndex, isOpen]);
 React.useEffect(() => setFocusedIndex(0), [options.length]);
 // Reset the highlighted option to the top of the list whenever the filtered
 // results change while searching. Intentionally keyed only on the result
 // count so it does not fight floating-ui's highlight-on-open behavior.
 React.useEffect(() => {
 if (!comparator) {
 containerRef?.current?.focus();
 }

 if (isOpen) {
 setFocusedIndex(options.findIndex(o => o.value === value));
 // Jest could not resolve `focusedItemRef.current` so we need to call scrollIntoView with ?.()
 focusedItemRef.current?.scrollIntoView?.({ block: 'nearest' });
 return;
 setActiveIndex(0);
 }
 }, [isOpen]);
 // eslint-disable-next-line react-hooks/exhaustive-deps
 }, [options.length]);

 const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
 if (e.key === 'ArrowUp') {
 e.preventDefault();
 if (isOpen) {
 return setFocusedIndex((i = 0) => (i === 0 ? options.length - 1 : i - 1));
 }
 return onTriggerClick();
 React.useEffect(() => {
 if (isOpen && !comparator) {
 containerRef.current?.focus();
 }
 }, [isOpen, comparator]);

 if (e.key === 'ArrowDown') {
 const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
 if (e.key === 'Enter' && activeIndex != null && activeIndex >= 0) {
 e.preventDefault();
 if (isOpen) {
 if (onReachEnd && focusedIndex === options.length - 1) {
 onReachEnd();
 return;
 }
 return setFocusedIndex((i = 0) => (i === options.length - 1 ? 0 : i + 1));
 const option = options[activeIndex];
 if (option) {
 select(option);
 }
 return onTriggerClick();
 return;
 }

 if (e.key === 'Enter' && focusedIndex >= 0) {
 e.preventDefault();
 return select(options[focusedIndex]);
 if (e.key === 'ArrowDown' && onReachEnd && activeIndex === options.length - 1) {
 onReachEnd();
 }
 };

 // floating-ui exposes the active option through `aria-activedescendant`, but
 // it puts it on this (unfocused) wrapper. Lift it onto the element that
 // actually holds focus: the listbox in select mode, the search input in
 // combobox mode.
 const { 'aria-activedescendant': rawActiveDescendant, ...floatingProps } = getFloatingProps(
 popoverCtx.getFloatingProps({ onKeyDown }),
 );
 // SAFETY: floating-ui types its prop getters as Record<string, unknown>. The
 // active descendant is the id string of the active option, or undefined.
 const activeDescendant = rawActiveDescendant as string | undefined;

 return (
 <Popover
 nodeId={nodeId}
Expand All@@ -361,7 +387,7 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 elementDescriptor={descriptors.selectOptionsContainer}
 elementId={descriptors.selectOptionsContainer.setId(elementId)}
 ref={floating}
 {...getFloatingProps({ onKeyDown })}
 {...floatingProps}
 direction='col'
 justify='start'
 sx={[
Expand All@@ -381,6 +407,11 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 {comparator && (
 <SelectSearchbar
 placeholder={searchPlaceholder}
 role='combobox'
 aria-expanded={isOpen}
 aria-controls={effectiveListboxId}
 aria-autocomplete='list'
 aria-activedescendant={activeDescendant}
 {...searchInputProps}
 />
 )}
Expand All@@ -391,6 +422,7 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 role='listbox'
 aria-label={ariaLabel}
 aria-labelledby={effectiveAriaLabelledBy}
 aria-activedescendant={comparator ? undefined : activeDescendant}
 tabIndex={comparator ? undefined : 0}
 sx={[
 theme => ({
Expand All@@ -404,24 +436,27 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 ]}
 {...rest}
 >
 {options.map((option, index) => {
 const isFocused = index === focusedIndex;
 const isSelected = value === option.value;

 return (
 <SelectRenderOption
 key={option.value}
 index={index}
 ref={isFocused ? focusedItemRef : undefined}
 option={option}
 renderOption={renderOption}
 isSelected={isSelected}
 isFocused={isFocused}
 handleSelect={select}
 elementId={elementId}
 />
 );
 })}
 <FloatingList elementsRef={elementsRef}>
 {options.map((option, index) => {
 const isFocused = index === activeIndex;
 const isSelected = value === option.value;

 return (
 <SelectRenderOption
 key={option.value}
 index={index}
 id={optionId(index)}
 option={option}
 renderOption={renderOption}
 getItemProps={getItemProps}
 isSelected={isSelected}
 isFocused={isFocused}
 handleSelect={select}
 elementId={elementId}
 />
 );
 })}
 </FloatingList>
 {noResultsMessage && options.length === 0 && <SelectNoResults>{noResultsMessage}</SelectNoResults>}
 {footer}
 </Flex>
Expand All@@ -447,6 +482,7 @@ export const SelectButton = (
 generatedTriggerId,
 listboxId,
 setTriggerId,
 getReferenceProps,
 } = useSelectState();
 const { reference, isOpen } = popoverCtx;
 const effectiveTriggerId = id ?? generatedTriggerId;
Expand All@@ -468,7 +504,7 @@ export const SelectButton = (
 id={effectiveTriggerId}
 variant='outline'
 textVariant='buttonLarge'
onClick={onTriggerClick}
{...getReferenceProps({ onClick: onTriggerClick })}
 aria-expanded={isOpen}
 aria-haspopup='listbox'
 aria-controls={ariaControls ?? (isOpen ? listboxId : undefined)}
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
fix(ui): route Select keyboard and ARIA through floating-ui hooks#9179

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

alexcarpenter
merged 1 commit into

from

Jul 16, 2026
 Merged


fix(ui): route Select keyboard and ARIA through floating-ui hooks
#9179
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/select-floating-ui-keyboard.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/ui': patch
---

Improve `Select` keyboard and screen reader support by routing navigation through floating-ui's interaction hooks. Pressing `ArrowUp`/`ArrowDown` on a focused, closed `Select` now opens the listbox, and the active option is announced via `aria-activedescendant`. The searchable variant (for example the `PhoneInput` country picker) now exposes a proper combobox: its input is marked `role="combobox"` with `aria-controls`, `aria-autocomplete="list"`, and `aria-activedescendant`, while the plain variant keeps its listbox semantics.

2 changes: 1 addition & 1 deletion
packages/ui/bundlewatch.config.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,7 @@
 { "path": "./dist/ui.shared.browser.js", "maxSize": "40KB" },
 { "path": "./dist/framework*.js", "maxSize": "44KB" },
 { "path": "./dist/vendors*.js", "maxSize": "73KB" },
 { "path": "./dist/ui-common*.js", "maxSize": "130KB" },
 { "path": "./dist/ui-common*.js", "maxSize": "132KB" },
 { "path": "./dist/signin*.js", "maxSize": "17KB" },
 { "path": "./dist/signup*.js", "maxSize": "13KB" },
 { "path": "./dist/userprofile*.js", "maxSize": "16KB" },
Expand Down

222 changes: 129 additions & 93 deletions
packages/ui/src/elements/Select.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
import { createContextAndHook } from '@clerk/shared/react';
import type { SelectId } from '@clerk/shared/types';
import { FloatingList, useInteractions, useListItem, useListNavigation } from '@floating-ui/react';
import type { PropsWithChildren, ReactElement, ReactNode } from 'react';
import React, { useState } from 'react';
import React from 'react';

import { Button, descriptors, Flex, Icon, Input, Text } from '../customizables';
import { usePopover, useSearchInput } from '../hooks';
Expand All@@ -15,6 +16,7 @@ import { Popover } from './Popover';

type UsePopoverReturn = ReturnType<typeof usePopover>;
type UseSearchInputReturn = ReturnType<typeof useSearchInput>;
type UseInteractionsReturn = ReturnType<typeof useInteractions>;

type Option = { value: string | null; label?: string };

Expand DownExpand Up@@ -44,7 +46,12 @@ type SelectState<O extends Option> = Pick<
 buttonRenderOption: RenderOption<O>;
 selectedOption: Option | null;
 select: (option: O) => void;
 focusedItemRef: React.RefObject<HTMLDivElement>;
 getReferenceProps: UseInteractionsReturn['getReferenceProps'];
 getFloatingProps: UseInteractionsReturn['getFloatingProps'];
 getItemProps: UseInteractionsReturn['getItemProps'];
 activeIndex: number | null;
 setActiveIndex: React.Dispatch<React.SetStateAction<number | null>>;
 elementsRef: React.MutableRefObject<Array<HTMLElement | null>>;
 onTriggerClick: () => void;
 generatedTriggerId: string;
 triggerId: string;
Expand DownExpand Up@@ -109,7 +116,25 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
 offset: { mainAxis: 6, crossAxis: -1 },
 });
 const togglePopover = popoverCtx.toggle;
 const focusedItemRef = React.useRef<HTMLDivElement>(null);
 const { context } = popoverCtx;
 const elementsRef = React.useRef<Array<HTMLElement | null>>([]);
 const [activeIndex, setActiveIndex] = React.useState<number | null>(null);

 // Delegate keyboard interactions to floating-ui so the trigger opens the
 // listbox on ArrowUp/ArrowDown and navigation stays a single source of truth.
 // `virtual` keeps DOM focus on the listbox (or the search input in combobox
 // mode) and exposes the active option via `aria-activedescendant`.
 const selectedIndex = options.findIndex(o => o.value === value);
 const listNavigation = useListNavigation(context, {
 listRef: elementsRef,
 activeIndex,
 selectedIndex: selectedIndex === -1 ? null : selectedIndex,
 onNavigate: setActiveIndex,
 loop: true,
 virtual: true,
 });
 const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([listNavigation]);

 const generatedTriggerId = React.useId();
 const generatedListboxId = React.useId();
 const [triggerId, setTriggerId] = React.useState(generatedTriggerId);
Expand DownExpand Up@@ -142,14 +167,19 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
 searchInputCtx,
 selectedOption: options.find(o => o.value === value) || null,
 noResultsMessage,
 focusedItemRef,
 value,
 renderOption: renderOption || defaultRenderOption,
 buttonRenderOption: renderOption || defaultButtonRenderOption,
 placeholder,
 searchPlaceholder,
 comparator,
 select,
 getReferenceProps,
 getFloatingProps,
 getItemProps,
 activeIndex,
 setActiveIndex,
 elementsRef,
 onTriggerClick: togglePopover,
 generatedTriggerId,
 triggerId,
Expand All@@ -171,41 +201,43 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
type SelectrenderOptionProps<O extends Option> = {
 option: Option;
 index: number;
 id: string;
 renderOption: RenderOption<O>;
 handleSelect: (option: Option) => void;
 getItemProps: UseInteractionsReturn['getItemProps'];
 isFocused?: boolean;
 isSelected?: boolean;
 elementId?: SelectId;
};

const SelectRenderOption = React.memo(
React.forwardRef((props: SelectrenderOptionProps<any>, ref?: React.ForwardedRef<HTMLDivElement>) => {
const { option, renderOption, isSelected, index, handleSelect, isFocused, elementId } = props;
const SelectRenderOption = React.memo((props: SelectrenderOptionProps<any>) => {
const { option, renderOption, isSelected, index, id, handleSelect, getItemProps, isFocused, elementId } = props;
 const item = useListItem();

return (
<Flex
ref={ref}
 role='option'
 aria-selected={isSelected}
 sx={{
 userSelect: 'none',
 cursor: 'pointer',
}}
 onClick={() => {
 handleSelect(option);
}}
>
 {React.cloneElement(renderOption(option, index, isSelected) as React.ReactElement<unknown>, {
 //@ts-expect-error
 elementDescriptor: descriptors.selectOption,
 elementId: descriptors.selectOption.setId(elementId),
 'data-selected': isSelected,
'data-focused': isFocused,
})}
</Flex>
);
}),
);
 return (
 <Flex
 ref={item.ref}
id={id}
role='option'
aria-selected={isSelected}
sx={{
userSelect: 'none',
cursor: 'pointer',
}}
{...getItemProps({
onClick: () => handleSelect(option),
})}
>
{React.cloneElement(renderOption(option, index, isSelected) as React.ReactElement<unknown>, {
//@ts-expect-error
elementDescriptor: descriptors.selectOption,
elementId: descriptors.selectOption.setId(elementId),
 'data-selected': isSelected,
'data-focused': isFocused,
})}
</Flex>
);
});

const SelectSearchbar = (props: PropsOfComponent<typeof InputWithIcon>) => {
 const { sx, ...rest } = props;
Expand DownExpand Up@@ -277,78 +309,72 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 renderOption,
 searchPlaceholder,
 comparator,
 focusedItemRef,
 noResultsMessage,
 select,
 onTriggerClick,
 elementId,
 triggerId,
 generatedListboxId,
 setListboxId,
 portal,
 getFloatingProps,
 getItemProps,
 activeIndex,
 setActiveIndex,
 elementsRef,
 } = useSelectState();
 const { filteredItems: options, searchInputProps } = searchInputCtx;
 const [focusedIndex, setFocusedIndex] = useState(0);
 const { isOpen, floating, styles, nodeId, context, getFloatingProps } = popoverCtx;
 const { isOpen, floating, styles, nodeId, context } = popoverCtx;
 const containerRef = React.useRef<HTMLDivElement>(null);
 const effectiveListboxId = id ?? generatedListboxId;
 const effectiveAriaLabelledBy = ariaLabelledBy ?? (ariaLabel ? undefined : triggerId);
 const optionId = (index: number) => `${effectiveListboxId}-option-${index}`;

 React.useEffect(() => {
 setListboxId(effectiveListboxId);
 }, [effectiveListboxId, setListboxId]);

 const scrollToItemOnSelectedIndexChange = () => {
 if (!isOpen) {
 setFocusedIndex(-1);
 return;
 }
 // Jest could not resolve `focusedItemRef.current` so we need to call scrollIntoView with ?.()
 focusedItemRef.current?.scrollIntoView?.({ block: 'nearest' });
 };

 React.useEffect(scrollToItemOnSelectedIndexChange, [focusedIndex, isOpen]);
 React.useEffect(() => setFocusedIndex(0), [options.length]);
 // Reset the highlighted option to the top of the list whenever the filtered
 // results change while searching. Intentionally keyed only on the result
 // count so it does not fight floating-ui's highlight-on-open behavior.
 React.useEffect(() => {
 if (!comparator) {
 containerRef?.current?.focus();
 }

 if (isOpen) {
 setFocusedIndex(options.findIndex(o => o.value === value));
 // Jest could not resolve `focusedItemRef.current` so we need to call scrollIntoView with ?.()
 focusedItemRef.current?.scrollIntoView?.({ block: 'nearest' });
 return;
 setActiveIndex(0);
 }
 }, [isOpen]);
 // eslint-disable-next-line react-hooks/exhaustive-deps
 }, [options.length]);

 const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
 if (e.key === 'ArrowUp') {
 e.preventDefault();
 if (isOpen) {
 return setFocusedIndex((i = 0) => (i === 0 ? options.length - 1 : i - 1));
 }
 return onTriggerClick();
 React.useEffect(() => {
 if (isOpen && !comparator) {
 containerRef.current?.focus();
 }
 }, [isOpen, comparator]);

 if (e.key === 'ArrowDown') {
 const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
 if (e.key === 'Enter' && activeIndex != null && activeIndex >= 0) {
 e.preventDefault();
 if (isOpen) {
 if (onReachEnd && focusedIndex === options.length - 1) {
 onReachEnd();
 return;
 }
 return setFocusedIndex((i = 0) => (i === options.length - 1 ? 0 : i + 1));
 const option = options[activeIndex];
 if (option) {
 select(option);
 }
 return onTriggerClick();
 return;
 }

 if (e.key === 'Enter' && focusedIndex >= 0) {
 e.preventDefault();
 return select(options[focusedIndex]);
 if (e.key === 'ArrowDown' && onReachEnd && activeIndex === options.length - 1) {
 onReachEnd();
 }
 };

 // floating-ui exposes the active option through `aria-activedescendant`, but
 // it puts it on this (unfocused) wrapper. Lift it onto the element that
 // actually holds focus: the listbox in select mode, the search input in
 // combobox mode.
 const { 'aria-activedescendant': rawActiveDescendant, ...floatingProps } = getFloatingProps(
 popoverCtx.getFloatingProps({ onKeyDown }),
 );
 // SAFETY: floating-ui types its prop getters as Record<string, unknown>. The
 // active descendant is the id string of the active option, or undefined.
 const activeDescendant = rawActiveDescendant as string | undefined;

 return (
 <Popover
 nodeId={nodeId}
Expand All@@ -361,7 +387,7 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 elementDescriptor={descriptors.selectOptionsContainer}
 elementId={descriptors.selectOptionsContainer.setId(elementId)}
 ref={floating}
 {...getFloatingProps({ onKeyDown })}
 {...floatingProps}
 direction='col'
 justify='start'
 sx={[
Expand All@@ -381,6 +407,11 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 {comparator && (
 <SelectSearchbar
 placeholder={searchPlaceholder}
 role='combobox'
 aria-expanded={isOpen}
 aria-controls={effectiveListboxId}
 aria-autocomplete='list'
 aria-activedescendant={activeDescendant}
 {...searchInputProps}
 />
 )}
Expand All@@ -391,6 +422,7 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 role='listbox'
 aria-label={ariaLabel}
 aria-labelledby={effectiveAriaLabelledBy}
 aria-activedescendant={comparator ? undefined : activeDescendant}
 tabIndex={comparator ? undefined : 0}
 sx={[
 theme => ({
Expand All@@ -404,24 +436,27 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 ]}
 {...rest}
 >
 {options.map((option, index) => {
 const isFocused = index === focusedIndex;
 const isSelected = value === option.value;

 return (
 <SelectRenderOption
 key={option.value}
 index={index}
 ref={isFocused ? focusedItemRef : undefined}
 option={option}
 renderOption={renderOption}
 isSelected={isSelected}
 isFocused={isFocused}
 handleSelect={select}
 elementId={elementId}
 />
 );
 })}
 <FloatingList elementsRef={elementsRef}>
 {options.map((option, index) => {
 const isFocused = index === activeIndex;
 const isSelected = value === option.value;

 return (
 <SelectRenderOption
 key={option.value}
 index={index}
 id={optionId(index)}
 option={option}
 renderOption={renderOption}
 getItemProps={getItemProps}
 isSelected={isSelected}
 isFocused={isFocused}
 handleSelect={select}
 elementId={elementId}
 />
 );
 })}
 </FloatingList>
 {noResultsMessage && options.length === 0 && <SelectNoResults>{noResultsMessage}</SelectNoResults>}
 {footer}
 </Flex>
Expand All@@ -447,6 +482,7 @@ export const SelectButton = (
 generatedTriggerId,
 listboxId,
 setTriggerId,
 getReferenceProps,
 } = useSelectState();
 const { reference, isOpen } = popoverCtx;
 const effectiveTriggerId = id ?? generatedTriggerId;
Expand All@@ -468,7 +504,7 @@ export const SelectButton = (
 id={effectiveTriggerId}
 variant='outline'
 textVariant='buttonLarge'
onClick={onTriggerClick}
{...getReferenceProps({ onClick: onTriggerClick })}
 aria-expanded={isOpen}
 aria-haspopup='listbox'
 aria-controls={ariaControls ?? (isOpen ? listboxId : undefined)}
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(ui): route Select keyboard and ARIA through floating-ui hooks#9179

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

alexcarpenter
merged 1 commit into

from

Jul 16, 2026
 Merged


fix(ui): route Select keyboard and ARIA through floating-ui hooks
#9179
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/select-floating-ui-keyboard.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/ui': patch
---

Improve `Select` keyboard and screen reader support by routing navigation through floating-ui's interaction hooks. Pressing `ArrowUp`/`ArrowDown` on a focused, closed `Select` now opens the listbox, and the active option is announced via `aria-activedescendant`. The searchable variant (for example the `PhoneInput` country picker) now exposes a proper combobox: its input is marked `role="combobox"` with `aria-controls`, `aria-autocomplete="list"`, and `aria-activedescendant`, while the plain variant keeps its listbox semantics.

2 changes: 1 addition & 1 deletion
packages/ui/bundlewatch.config.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,7 @@
 { "path": "./dist/ui.shared.browser.js", "maxSize": "40KB" },
 { "path": "./dist/framework*.js", "maxSize": "44KB" },
 { "path": "./dist/vendors*.js", "maxSize": "73KB" },
 { "path": "./dist/ui-common*.js", "maxSize": "130KB" },
 { "path": "./dist/ui-common*.js", "maxSize": "132KB" },
 { "path": "./dist/signin*.js", "maxSize": "17KB" },
 { "path": "./dist/signup*.js", "maxSize": "13KB" },
 { "path": "./dist/userprofile*.js", "maxSize": "16KB" },
Expand Down

222 changes: 129 additions & 93 deletions
packages/ui/src/elements/Select.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
import { createContextAndHook } from '@clerk/shared/react';
import type { SelectId } from '@clerk/shared/types';
import { FloatingList, useInteractions, useListItem, useListNavigation } from '@floating-ui/react';
import type { PropsWithChildren, ReactElement, ReactNode } from 'react';
import React, { useState } from 'react';
import React from 'react';

import { Button, descriptors, Flex, Icon, Input, Text } from '../customizables';
import { usePopover, useSearchInput } from '../hooks';
Expand All@@ -15,6 +16,7 @@ import { Popover } from './Popover';

type UsePopoverReturn = ReturnType<typeof usePopover>;
type UseSearchInputReturn = ReturnType<typeof useSearchInput>;
type UseInteractionsReturn = ReturnType<typeof useInteractions>;

type Option = { value: string | null; label?: string };

Expand DownExpand Up@@ -44,7 +46,12 @@ type SelectState<O extends Option> = Pick<
 buttonRenderOption: RenderOption<O>;
 selectedOption: Option | null;
 select: (option: O) => void;
 focusedItemRef: React.RefObject<HTMLDivElement>;
 getReferenceProps: UseInteractionsReturn['getReferenceProps'];
 getFloatingProps: UseInteractionsReturn['getFloatingProps'];
 getItemProps: UseInteractionsReturn['getItemProps'];
 activeIndex: number | null;
 setActiveIndex: React.Dispatch<React.SetStateAction<number | null>>;
 elementsRef: React.MutableRefObject<Array<HTMLElement | null>>;
 onTriggerClick: () => void;
 generatedTriggerId: string;
 triggerId: string;
Expand DownExpand Up@@ -109,7 +116,25 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
 offset: { mainAxis: 6, crossAxis: -1 },
 });
 const togglePopover = popoverCtx.toggle;
 const focusedItemRef = React.useRef<HTMLDivElement>(null);
 const { context } = popoverCtx;
 const elementsRef = React.useRef<Array<HTMLElement | null>>([]);
 const [activeIndex, setActiveIndex] = React.useState<number | null>(null);

 // Delegate keyboard interactions to floating-ui so the trigger opens the
 // listbox on ArrowUp/ArrowDown and navigation stays a single source of truth.
 // `virtual` keeps DOM focus on the listbox (or the search input in combobox
 // mode) and exposes the active option via `aria-activedescendant`.
 const selectedIndex = options.findIndex(o => o.value === value);
 const listNavigation = useListNavigation(context, {
 listRef: elementsRef,
 activeIndex,
 selectedIndex: selectedIndex === -1 ? null : selectedIndex,
 onNavigate: setActiveIndex,
 loop: true,
 virtual: true,
 });
 const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([listNavigation]);

 const generatedTriggerId = React.useId();
 const generatedListboxId = React.useId();
 const [triggerId, setTriggerId] = React.useState(generatedTriggerId);
Expand DownExpand Up@@ -142,14 +167,19 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
 searchInputCtx,
 selectedOption: options.find(o => o.value === value) || null,
 noResultsMessage,
 focusedItemRef,
 value,
 renderOption: renderOption || defaultRenderOption,
 buttonRenderOption: renderOption || defaultButtonRenderOption,
 placeholder,
 searchPlaceholder,
 comparator,
 select,
 getReferenceProps,
 getFloatingProps,
 getItemProps,
 activeIndex,
 setActiveIndex,
 elementsRef,
 onTriggerClick: togglePopover,
 generatedTriggerId,
 triggerId,
Expand All@@ -171,41 +201,43 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
type SelectrenderOptionProps<O extends Option> = {
 option: Option;
 index: number;
 id: string;
 renderOption: RenderOption<O>;
 handleSelect: (option: Option) => void;
 getItemProps: UseInteractionsReturn['getItemProps'];
 isFocused?: boolean;
 isSelected?: boolean;
 elementId?: SelectId;
};

const SelectRenderOption = React.memo(
React.forwardRef((props: SelectrenderOptionProps<any>, ref?: React.ForwardedRef<HTMLDivElement>) => {
const { option, renderOption, isSelected, index, handleSelect, isFocused, elementId } = props;
const SelectRenderOption = React.memo((props: SelectrenderOptionProps<any>) => {
const { option, renderOption, isSelected, index, id, handleSelect, getItemProps, isFocused, elementId } = props;
 const item = useListItem();

return (
<Flex
ref={ref}
 role='option'
 aria-selected={isSelected}
 sx={{
 userSelect: 'none',
 cursor: 'pointer',
}}
 onClick={() => {
 handleSelect(option);
}}
>
 {React.cloneElement(renderOption(option, index, isSelected) as React.ReactElement<unknown>, {
 //@ts-expect-error
 elementDescriptor: descriptors.selectOption,
 elementId: descriptors.selectOption.setId(elementId),
 'data-selected': isSelected,
'data-focused': isFocused,
})}
</Flex>
);
}),
);
 return (
 <Flex
 ref={item.ref}
id={id}
role='option'
aria-selected={isSelected}
sx={{
userSelect: 'none',
cursor: 'pointer',
}}
{...getItemProps({
onClick: () => handleSelect(option),
})}
>
{React.cloneElement(renderOption(option, index, isSelected) as React.ReactElement<unknown>, {
//@ts-expect-error
elementDescriptor: descriptors.selectOption,
elementId: descriptors.selectOption.setId(elementId),
 'data-selected': isSelected,
'data-focused': isFocused,
})}
</Flex>
);
});

const SelectSearchbar = (props: PropsOfComponent<typeof InputWithIcon>) => {
 const { sx, ...rest } = props;
Expand DownExpand Up@@ -277,78 +309,72 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 renderOption,
 searchPlaceholder,
 comparator,
 focusedItemRef,
 noResultsMessage,
 select,
 onTriggerClick,
 elementId,
 triggerId,
 generatedListboxId,
 setListboxId,
 portal,
 getFloatingProps,
 getItemProps,
 activeIndex,
 setActiveIndex,
 elementsRef,
 } = useSelectState();
 const { filteredItems: options, searchInputProps } = searchInputCtx;
 const [focusedIndex, setFocusedIndex] = useState(0);
 const { isOpen, floating, styles, nodeId, context, getFloatingProps } = popoverCtx;
 const { isOpen, floating, styles, nodeId, context } = popoverCtx;
 const containerRef = React.useRef<HTMLDivElement>(null);
 const effectiveListboxId = id ?? generatedListboxId;
 const effectiveAriaLabelledBy = ariaLabelledBy ?? (ariaLabel ? undefined : triggerId);
 const optionId = (index: number) => `${effectiveListboxId}-option-${index}`;

 React.useEffect(() => {
 setListboxId(effectiveListboxId);
 }, [effectiveListboxId, setListboxId]);

 const scrollToItemOnSelectedIndexChange = () => {
 if (!isOpen) {
 setFocusedIndex(-1);
 return;
 }
 // Jest could not resolve `focusedItemRef.current` so we need to call scrollIntoView with ?.()
 focusedItemRef.current?.scrollIntoView?.({ block: 'nearest' });
 };

 React.useEffect(scrollToItemOnSelectedIndexChange, [focusedIndex, isOpen]);
 React.useEffect(() => setFocusedIndex(0), [options.length]);
 // Reset the highlighted option to the top of the list whenever the filtered
 // results change while searching. Intentionally keyed only on the result
 // count so it does not fight floating-ui's highlight-on-open behavior.
 React.useEffect(() => {
 if (!comparator) {
 containerRef?.current?.focus();
 }

 if (isOpen) {
 setFocusedIndex(options.findIndex(o => o.value === value));
 // Jest could not resolve `focusedItemRef.current` so we need to call scrollIntoView with ?.()
 focusedItemRef.current?.scrollIntoView?.({ block: 'nearest' });
 return;
 setActiveIndex(0);
 }
 }, [isOpen]);
 // eslint-disable-next-line react-hooks/exhaustive-deps
 }, [options.length]);

 const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
 if (e.key === 'ArrowUp') {
 e.preventDefault();
 if (isOpen) {
 return setFocusedIndex((i = 0) => (i === 0 ? options.length - 1 : i - 1));
 }
 return onTriggerClick();
 React.useEffect(() => {
 if (isOpen && !comparator) {
 containerRef.current?.focus();
 }
 }, [isOpen, comparator]);

 if (e.key === 'ArrowDown') {
 const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
 if (e.key === 'Enter' && activeIndex != null && activeIndex >= 0) {
 e.preventDefault();
 if (isOpen) {
 if (onReachEnd && focusedIndex === options.length - 1) {
 onReachEnd();
 return;
 }
 return setFocusedIndex((i = 0) => (i === options.length - 1 ? 0 : i + 1));
 const option = options[activeIndex];
 if (option) {
 select(option);
 }
 return onTriggerClick();
 return;
 }

 if (e.key === 'Enter' && focusedIndex >= 0) {
 e.preventDefault();
 return select(options[focusedIndex]);
 if (e.key === 'ArrowDown' && onReachEnd && activeIndex === options.length - 1) {
 onReachEnd();
 }
 };

 // floating-ui exposes the active option through `aria-activedescendant`, but
 // it puts it on this (unfocused) wrapper. Lift it onto the element that
 // actually holds focus: the listbox in select mode, the search input in
 // combobox mode.
 const { 'aria-activedescendant': rawActiveDescendant, ...floatingProps } = getFloatingProps(
 popoverCtx.getFloatingProps({ onKeyDown }),
 );
 // SAFETY: floating-ui types its prop getters as Record<string, unknown>. The
 // active descendant is the id string of the active option, or undefined.
 const activeDescendant = rawActiveDescendant as string | undefined;

 return (
 <Popover
 nodeId={nodeId}
Expand All@@ -361,7 +387,7 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 elementDescriptor={descriptors.selectOptionsContainer}
 elementId={descriptors.selectOptionsContainer.setId(elementId)}
 ref={floating}
 {...getFloatingProps({ onKeyDown })}
 {...floatingProps}
 direction='col'
 justify='start'
 sx={[
Expand All@@ -381,6 +407,11 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 {comparator && (
 <SelectSearchbar
 placeholder={searchPlaceholder}
 role='combobox'
 aria-expanded={isOpen}
 aria-controls={effectiveListboxId}
 aria-autocomplete='list'
 aria-activedescendant={activeDescendant}
 {...searchInputProps}
 />
 )}
Expand All@@ -391,6 +422,7 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 role='listbox'
 aria-label={ariaLabel}
 aria-labelledby={effectiveAriaLabelledBy}
 aria-activedescendant={comparator ? undefined : activeDescendant}
 tabIndex={comparator ? undefined : 0}
 sx={[
 theme => ({
Expand All@@ -404,24 +436,27 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 ]}
 {...rest}
 >
 {options.map((option, index) => {
 const isFocused = index === focusedIndex;
 const isSelected = value === option.value;

 return (
 <SelectRenderOption
 key={option.value}
 index={index}
 ref={isFocused ? focusedItemRef : undefined}
 option={option}
 renderOption={renderOption}
 isSelected={isSelected}
 isFocused={isFocused}
 handleSelect={select}
 elementId={elementId}
 />
 );
 })}
 <FloatingList elementsRef={elementsRef}>
 {options.map((option, index) => {
 const isFocused = index === activeIndex;
 const isSelected = value === option.value;

 return (
 <SelectRenderOption
 key={option.value}
 index={index}
 id={optionId(index)}
 option={option}
 renderOption={renderOption}
 getItemProps={getItemProps}
 isSelected={isSelected}
 isFocused={isFocused}
 handleSelect={select}
 elementId={elementId}
 />
 );
 })}
 </FloatingList>
 {noResultsMessage && options.length === 0 && <SelectNoResults>{noResultsMessage}</SelectNoResults>}
 {footer}
 </Flex>
Expand All@@ -447,6 +482,7 @@ export const SelectButton = (
 generatedTriggerId,
 listboxId,
 setTriggerId,
 getReferenceProps,
 } = useSelectState();
 const { reference, isOpen } = popoverCtx;
 const effectiveTriggerId = id ?? generatedTriggerId;
Expand All@@ -468,7 +504,7 @@ export const SelectButton = (
 id={effectiveTriggerId}
 variant='outline'
 textVariant='buttonLarge'
onClick={onTriggerClick}
{...getReferenceProps({ onClick: onTriggerClick })}
 aria-expanded={isOpen}
 aria-haspopup='listbox'
 aria-controls={ariaControls ?? (isOpen ? listboxId : undefined)}
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(ui): route Select keyboard and ARIA through floating-ui hooks#9179

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

alexcarpenter
merged 1 commit into

from

Jul 16, 2026
 Merged


fix(ui): route Select keyboard and ARIA through floating-ui hooks
#9179
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/select-floating-ui-keyboard.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/ui': patch
---

Improve `Select` keyboard and screen reader support by routing navigation through floating-ui's interaction hooks. Pressing `ArrowUp`/`ArrowDown` on a focused, closed `Select` now opens the listbox, and the active option is announced via `aria-activedescendant`. The searchable variant (for example the `PhoneInput` country picker) now exposes a proper combobox: its input is marked `role="combobox"` with `aria-controls`, `aria-autocomplete="list"`, and `aria-activedescendant`, while the plain variant keeps its listbox semantics.

2 changes: 1 addition & 1 deletion
packages/ui/bundlewatch.config.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,7 @@
 { "path": "./dist/ui.shared.browser.js", "maxSize": "40KB" },
 { "path": "./dist/framework*.js", "maxSize": "44KB" },
 { "path": "./dist/vendors*.js", "maxSize": "73KB" },
 { "path": "./dist/ui-common*.js", "maxSize": "130KB" },
 { "path": "./dist/ui-common*.js", "maxSize": "132KB" },
 { "path": "./dist/signin*.js", "maxSize": "17KB" },
 { "path": "./dist/signup*.js", "maxSize": "13KB" },
 { "path": "./dist/userprofile*.js", "maxSize": "16KB" },
Expand Down

222 changes: 129 additions & 93 deletions
packages/ui/src/elements/Select.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
import { createContextAndHook } from '@clerk/shared/react';
import type { SelectId } from '@clerk/shared/types';
import { FloatingList, useInteractions, useListItem, useListNavigation } from '@floating-ui/react';
import type { PropsWithChildren, ReactElement, ReactNode } from 'react';
import React, { useState } from 'react';
import React from 'react';

import { Button, descriptors, Flex, Icon, Input, Text } from '../customizables';
import { usePopover, useSearchInput } from '../hooks';
Expand All@@ -15,6 +16,7 @@ import { Popover } from './Popover';

type UsePopoverReturn = ReturnType<typeof usePopover>;
type UseSearchInputReturn = ReturnType<typeof useSearchInput>;
type UseInteractionsReturn = ReturnType<typeof useInteractions>;

type Option = { value: string | null; label?: string };

Expand DownExpand Up@@ -44,7 +46,12 @@ type SelectState<O extends Option> = Pick<
 buttonRenderOption: RenderOption<O>;
 selectedOption: Option | null;
 select: (option: O) => void;
 focusedItemRef: React.RefObject<HTMLDivElement>;
 getReferenceProps: UseInteractionsReturn['getReferenceProps'];
 getFloatingProps: UseInteractionsReturn['getFloatingProps'];
 getItemProps: UseInteractionsReturn['getItemProps'];
 activeIndex: number | null;
 setActiveIndex: React.Dispatch<React.SetStateAction<number | null>>;
 elementsRef: React.MutableRefObject<Array<HTMLElement | null>>;
 onTriggerClick: () => void;
 generatedTriggerId: string;
 triggerId: string;
Expand DownExpand Up@@ -109,7 +116,25 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
 offset: { mainAxis: 6, crossAxis: -1 },
 });
 const togglePopover = popoverCtx.toggle;
 const focusedItemRef = React.useRef<HTMLDivElement>(null);
 const { context } = popoverCtx;
 const elementsRef = React.useRef<Array<HTMLElement | null>>([]);
 const [activeIndex, setActiveIndex] = React.useState<number | null>(null);

 // Delegate keyboard interactions to floating-ui so the trigger opens the
 // listbox on ArrowUp/ArrowDown and navigation stays a single source of truth.
 // `virtual` keeps DOM focus on the listbox (or the search input in combobox
 // mode) and exposes the active option via `aria-activedescendant`.
 const selectedIndex = options.findIndex(o => o.value === value);
 const listNavigation = useListNavigation(context, {
 listRef: elementsRef,
 activeIndex,
 selectedIndex: selectedIndex === -1 ? null : selectedIndex,
 onNavigate: setActiveIndex,
 loop: true,
 virtual: true,
 });
 const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([listNavigation]);

 const generatedTriggerId = React.useId();
 const generatedListboxId = React.useId();
 const [triggerId, setTriggerId] = React.useState(generatedTriggerId);
Expand DownExpand Up@@ -142,14 +167,19 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
 searchInputCtx,
 selectedOption: options.find(o => o.value === value) || null,
 noResultsMessage,
 focusedItemRef,
 value,
 renderOption: renderOption || defaultRenderOption,
 buttonRenderOption: renderOption || defaultButtonRenderOption,
 placeholder,
 searchPlaceholder,
 comparator,
 select,
 getReferenceProps,
 getFloatingProps,
 getItemProps,
 activeIndex,
 setActiveIndex,
 elementsRef,
 onTriggerClick: togglePopover,
 generatedTriggerId,
 triggerId,
Expand All@@ -171,41 +201,43 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
type SelectrenderOptionProps<O extends Option> = {
 option: Option;
 index: number;
 id: string;
 renderOption: RenderOption<O>;
 handleSelect: (option: Option) => void;
 getItemProps: UseInteractionsReturn['getItemProps'];
 isFocused?: boolean;
 isSelected?: boolean;
 elementId?: SelectId;
};

const SelectRenderOption = React.memo(
React.forwardRef((props: SelectrenderOptionProps<any>, ref?: React.ForwardedRef<HTMLDivElement>) => {
const { option, renderOption, isSelected, index, handleSelect, isFocused, elementId } = props;
const SelectRenderOption = React.memo((props: SelectrenderOptionProps<any>) => {
const { option, renderOption, isSelected, index, id, handleSelect, getItemProps, isFocused, elementId } = props;
 const item = useListItem();

return (
<Flex
ref={ref}
 role='option'
 aria-selected={isSelected}
 sx={{
 userSelect: 'none',
 cursor: 'pointer',
}}
 onClick={() => {
 handleSelect(option);
}}
>
 {React.cloneElement(renderOption(option, index, isSelected) as React.ReactElement<unknown>, {
 //@ts-expect-error
 elementDescriptor: descriptors.selectOption,
 elementId: descriptors.selectOption.setId(elementId),
 'data-selected': isSelected,
'data-focused': isFocused,
})}
</Flex>
);
}),
);
 return (
 <Flex
 ref={item.ref}
id={id}
role='option'
aria-selected={isSelected}
sx={{
userSelect: 'none',
cursor: 'pointer',
}}
{...getItemProps({
onClick: () => handleSelect(option),
})}
>
{React.cloneElement(renderOption(option, index, isSelected) as React.ReactElement<unknown>, {
//@ts-expect-error
elementDescriptor: descriptors.selectOption,
elementId: descriptors.selectOption.setId(elementId),
 'data-selected': isSelected,
'data-focused': isFocused,
})}
</Flex>
);
});

const SelectSearchbar = (props: PropsOfComponent<typeof InputWithIcon>) => {
 const { sx, ...rest } = props;
Expand DownExpand Up@@ -277,78 +309,72 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 renderOption,
 searchPlaceholder,
 comparator,
 focusedItemRef,
 noResultsMessage,
 select,
 onTriggerClick,
 elementId,
 triggerId,
 generatedListboxId,
 setListboxId,
 portal,
 getFloatingProps,
 getItemProps,
 activeIndex,
 setActiveIndex,
 elementsRef,
 } = useSelectState();
 const { filteredItems: options, searchInputProps } = searchInputCtx;
 const [focusedIndex, setFocusedIndex] = useState(0);
 const { isOpen, floating, styles, nodeId, context, getFloatingProps } = popoverCtx;
 const { isOpen, floating, styles, nodeId, context } = popoverCtx;
 const containerRef = React.useRef<HTMLDivElement>(null);
 const effectiveListboxId = id ?? generatedListboxId;
 const effectiveAriaLabelledBy = ariaLabelledBy ?? (ariaLabel ? undefined : triggerId);
 const optionId = (index: number) => `${effectiveListboxId}-option-${index}`;

 React.useEffect(() => {
 setListboxId(effectiveListboxId);
 }, [effectiveListboxId, setListboxId]);

 const scrollToItemOnSelectedIndexChange = () => {
 if (!isOpen) {
 setFocusedIndex(-1);
 return;
 }
 // Jest could not resolve `focusedItemRef.current` so we need to call scrollIntoView with ?.()
 focusedItemRef.current?.scrollIntoView?.({ block: 'nearest' });
 };

 React.useEffect(scrollToItemOnSelectedIndexChange, [focusedIndex, isOpen]);
 React.useEffect(() => setFocusedIndex(0), [options.length]);
 // Reset the highlighted option to the top of the list whenever the filtered
 // results change while searching. Intentionally keyed only on the result
 // count so it does not fight floating-ui's highlight-on-open behavior.
 React.useEffect(() => {
 if (!comparator) {
 containerRef?.current?.focus();
 }

 if (isOpen) {
 setFocusedIndex(options.findIndex(o => o.value === value));
 // Jest could not resolve `focusedItemRef.current` so we need to call scrollIntoView with ?.()
 focusedItemRef.current?.scrollIntoView?.({ block: 'nearest' });
 return;
 setActiveIndex(0);
 }
 }, [isOpen]);
 // eslint-disable-next-line react-hooks/exhaustive-deps
 }, [options.length]);

 const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
 if (e.key === 'ArrowUp') {
 e.preventDefault();
 if (isOpen) {
 return setFocusedIndex((i = 0) => (i === 0 ? options.length - 1 : i - 1));
 }
 return onTriggerClick();
 React.useEffect(() => {
 if (isOpen && !comparator) {
 containerRef.current?.focus();
 }
 }, [isOpen, comparator]);

 if (e.key === 'ArrowDown') {
 const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
 if (e.key === 'Enter' && activeIndex != null && activeIndex >= 0) {
 e.preventDefault();
 if (isOpen) {
 if (onReachEnd && focusedIndex === options.length - 1) {
 onReachEnd();
 return;
 }
 return setFocusedIndex((i = 0) => (i === options.length - 1 ? 0 : i + 1));
 const option = options[activeIndex];
 if (option) {
 select(option);
 }
 return onTriggerClick();
 return;
 }

 if (e.key === 'Enter' && focusedIndex >= 0) {
 e.preventDefault();
 return select(options[focusedIndex]);
 if (e.key === 'ArrowDown' && onReachEnd && activeIndex === options.length - 1) {
 onReachEnd();
 }
 };

 // floating-ui exposes the active option through `aria-activedescendant`, but
 // it puts it on this (unfocused) wrapper. Lift it onto the element that
 // actually holds focus: the listbox in select mode, the search input in
 // combobox mode.
 const { 'aria-activedescendant': rawActiveDescendant, ...floatingProps } = getFloatingProps(
 popoverCtx.getFloatingProps({ onKeyDown }),
 );
 // SAFETY: floating-ui types its prop getters as Record<string, unknown>. The
 // active descendant is the id string of the active option, or undefined.
 const activeDescendant = rawActiveDescendant as string | undefined;

 return (
 <Popover
 nodeId={nodeId}
Expand All@@ -361,7 +387,7 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 elementDescriptor={descriptors.selectOptionsContainer}
 elementId={descriptors.selectOptionsContainer.setId(elementId)}
 ref={floating}
 {...getFloatingProps({ onKeyDown })}
 {...floatingProps}
 direction='col'
 justify='start'
 sx={[
Expand All@@ -381,6 +407,11 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 {comparator && (
 <SelectSearchbar
 placeholder={searchPlaceholder}
 role='combobox'
 aria-expanded={isOpen}
 aria-controls={effectiveListboxId}
 aria-autocomplete='list'
 aria-activedescendant={activeDescendant}
 {...searchInputProps}
 />
 )}
Expand All@@ -391,6 +422,7 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 role='listbox'
 aria-label={ariaLabel}
 aria-labelledby={effectiveAriaLabelledBy}
 aria-activedescendant={comparator ? undefined : activeDescendant}
 tabIndex={comparator ? undefined : 0}
 sx={[
 theme => ({
Expand All@@ -404,24 +436,27 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 ]}
 {...rest}
 >
 {options.map((option, index) => {
 const isFocused = index === focusedIndex;
 const isSelected = value === option.value;

 return (
 <SelectRenderOption
 key={option.value}
 index={index}
 ref={isFocused ? focusedItemRef : undefined}
 option={option}
 renderOption={renderOption}
 isSelected={isSelected}
 isFocused={isFocused}
 handleSelect={select}
 elementId={elementId}
 />
 );
 })}
 <FloatingList elementsRef={elementsRef}>
 {options.map((option, index) => {
 const isFocused = index === activeIndex;
 const isSelected = value === option.value;

 return (
 <SelectRenderOption
 key={option.value}
 index={index}
 id={optionId(index)}
 option={option}
 renderOption={renderOption}
 getItemProps={getItemProps}
 isSelected={isSelected}
 isFocused={isFocused}
 handleSelect={select}
 elementId={elementId}
 />
 );
 })}
 </FloatingList>
 {noResultsMessage && options.length === 0 && <SelectNoResults>{noResultsMessage}</SelectNoResults>}
 {footer}
 </Flex>
Expand All@@ -447,6 +482,7 @@ export const SelectButton = (
 generatedTriggerId,
 listboxId,
 setTriggerId,
 getReferenceProps,
 } = useSelectState();
 const { reference, isOpen } = popoverCtx;
 const effectiveTriggerId = id ?? generatedTriggerId;
Expand All@@ -468,7 +504,7 @@ export const SelectButton = (
 id={effectiveTriggerId}
 variant='outline'
 textVariant='buttonLarge'
onClick={onTriggerClick}
{...getReferenceProps({ onClick: onTriggerClick })}
 aria-expanded={isOpen}
 aria-haspopup='listbox'
 aria-controls={ariaControls ?? (isOpen ? listboxId : undefined)}
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
fix(ui): route Select keyboard and ARIA through floating-ui hooks#9179

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

alexcarpenter
merged 1 commit into

from

Jul 16, 2026
 Merged


fix(ui): route Select keyboard and ARIA through floating-ui hooks
#9179
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/select-floating-ui-keyboard.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/ui': patch
---

Improve `Select` keyboard and screen reader support by routing navigation through floating-ui's interaction hooks. Pressing `ArrowUp`/`ArrowDown` on a focused, closed `Select` now opens the listbox, and the active option is announced via `aria-activedescendant`. The searchable variant (for example the `PhoneInput` country picker) now exposes a proper combobox: its input is marked `role="combobox"` with `aria-controls`, `aria-autocomplete="list"`, and `aria-activedescendant`, while the plain variant keeps its listbox semantics.

2 changes: 1 addition & 1 deletion
packages/ui/bundlewatch.config.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,7 @@
 { "path": "./dist/ui.shared.browser.js", "maxSize": "40KB" },
 { "path": "./dist/framework*.js", "maxSize": "44KB" },
 { "path": "./dist/vendors*.js", "maxSize": "73KB" },
 { "path": "./dist/ui-common*.js", "maxSize": "130KB" },
 { "path": "./dist/ui-common*.js", "maxSize": "132KB" },
 { "path": "./dist/signin*.js", "maxSize": "17KB" },
 { "path": "./dist/signup*.js", "maxSize": "13KB" },
 { "path": "./dist/userprofile*.js", "maxSize": "16KB" },
Expand Down

222 changes: 129 additions & 93 deletions
packages/ui/src/elements/Select.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
import { createContextAndHook } from '@clerk/shared/react';
import type { SelectId } from '@clerk/shared/types';
import { FloatingList, useInteractions, useListItem, useListNavigation } from '@floating-ui/react';
import type { PropsWithChildren, ReactElement, ReactNode } from 'react';
import React, { useState } from 'react';
import React from 'react';

import { Button, descriptors, Flex, Icon, Input, Text } from '../customizables';
import { usePopover, useSearchInput } from '../hooks';
Expand All@@ -15,6 +16,7 @@ import { Popover } from './Popover';

type UsePopoverReturn = ReturnType<typeof usePopover>;
type UseSearchInputReturn = ReturnType<typeof useSearchInput>;
type UseInteractionsReturn = ReturnType<typeof useInteractions>;

type Option = { value: string | null; label?: string };

Expand DownExpand Up@@ -44,7 +46,12 @@ type SelectState<O extends Option> = Pick<
 buttonRenderOption: RenderOption<O>;
 selectedOption: Option | null;
 select: (option: O) => void;
 focusedItemRef: React.RefObject<HTMLDivElement>;
 getReferenceProps: UseInteractionsReturn['getReferenceProps'];
 getFloatingProps: UseInteractionsReturn['getFloatingProps'];
 getItemProps: UseInteractionsReturn['getItemProps'];
 activeIndex: number | null;
 setActiveIndex: React.Dispatch<React.SetStateAction<number | null>>;
 elementsRef: React.MutableRefObject<Array<HTMLElement | null>>;
 onTriggerClick: () => void;
 generatedTriggerId: string;
 triggerId: string;
Expand DownExpand Up@@ -109,7 +116,25 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
 offset: { mainAxis: 6, crossAxis: -1 },
 });
 const togglePopover = popoverCtx.toggle;
 const focusedItemRef = React.useRef<HTMLDivElement>(null);
 const { context } = popoverCtx;
 const elementsRef = React.useRef<Array<HTMLElement | null>>([]);
 const [activeIndex, setActiveIndex] = React.useState<number | null>(null);

 // Delegate keyboard interactions to floating-ui so the trigger opens the
 // listbox on ArrowUp/ArrowDown and navigation stays a single source of truth.
 // `virtual` keeps DOM focus on the listbox (or the search input in combobox
 // mode) and exposes the active option via `aria-activedescendant`.
 const selectedIndex = options.findIndex(o => o.value === value);
 const listNavigation = useListNavigation(context, {
 listRef: elementsRef,
 activeIndex,
 selectedIndex: selectedIndex === -1 ? null : selectedIndex,
 onNavigate: setActiveIndex,
 loop: true,
 virtual: true,
 });
 const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([listNavigation]);

 const generatedTriggerId = React.useId();
 const generatedListboxId = React.useId();
 const [triggerId, setTriggerId] = React.useState(generatedTriggerId);
Expand DownExpand Up@@ -142,14 +167,19 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
 searchInputCtx,
 selectedOption: options.find(o => o.value === value) || null,
 noResultsMessage,
 focusedItemRef,
 value,
 renderOption: renderOption || defaultRenderOption,
 buttonRenderOption: renderOption || defaultButtonRenderOption,
 placeholder,
 searchPlaceholder,
 comparator,
 select,
 getReferenceProps,
 getFloatingProps,
 getItemProps,
 activeIndex,
 setActiveIndex,
 elementsRef,
 onTriggerClick: togglePopover,
 generatedTriggerId,
 triggerId,
Expand All@@ -171,41 +201,43 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
type SelectrenderOptionProps<O extends Option> = {
 option: Option;
 index: number;
 id: string;
 renderOption: RenderOption<O>;
 handleSelect: (option: Option) => void;
 getItemProps: UseInteractionsReturn['getItemProps'];
 isFocused?: boolean;
 isSelected?: boolean;
 elementId?: SelectId;
};

const SelectRenderOption = React.memo(
React.forwardRef((props: SelectrenderOptionProps<any>, ref?: React.ForwardedRef<HTMLDivElement>) => {
const { option, renderOption, isSelected, index, handleSelect, isFocused, elementId } = props;
const SelectRenderOption = React.memo((props: SelectrenderOptionProps<any>) => {
const { option, renderOption, isSelected, index, id, handleSelect, getItemProps, isFocused, elementId } = props;
 const item = useListItem();

return (
<Flex
ref={ref}
 role='option'
 aria-selected={isSelected}
 sx={{
 userSelect: 'none',
 cursor: 'pointer',
}}
 onClick={() => {
 handleSelect(option);
}}
>
 {React.cloneElement(renderOption(option, index, isSelected) as React.ReactElement<unknown>, {
 //@ts-expect-error
 elementDescriptor: descriptors.selectOption,
 elementId: descriptors.selectOption.setId(elementId),
 'data-selected': isSelected,
'data-focused': isFocused,
})}
</Flex>
);
}),
);
 return (
 <Flex
 ref={item.ref}
id={id}
role='option'
aria-selected={isSelected}
sx={{
userSelect: 'none',
cursor: 'pointer',
}}
{...getItemProps({
onClick: () => handleSelect(option),
})}
>
{React.cloneElement(renderOption(option, index, isSelected) as React.ReactElement<unknown>, {
//@ts-expect-error
elementDescriptor: descriptors.selectOption,
elementId: descriptors.selectOption.setId(elementId),
 'data-selected': isSelected,
'data-focused': isFocused,
})}
</Flex>
);
});

const SelectSearchbar = (props: PropsOfComponent<typeof InputWithIcon>) => {
 const { sx, ...rest } = props;
Expand DownExpand Up@@ -277,78 +309,72 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 renderOption,
 searchPlaceholder,
 comparator,
 focusedItemRef,
 noResultsMessage,
 select,
 onTriggerClick,
 elementId,
 triggerId,
 generatedListboxId,
 setListboxId,
 portal,
 getFloatingProps,
 getItemProps,
 activeIndex,
 setActiveIndex,
 elementsRef,
 } = useSelectState();
 const { filteredItems: options, searchInputProps } = searchInputCtx;
 const [focusedIndex, setFocusedIndex] = useState(0);
 const { isOpen, floating, styles, nodeId, context, getFloatingProps } = popoverCtx;
 const { isOpen, floating, styles, nodeId, context } = popoverCtx;
 const containerRef = React.useRef<HTMLDivElement>(null);
 const effectiveListboxId = id ?? generatedListboxId;
 const effectiveAriaLabelledBy = ariaLabelledBy ?? (ariaLabel ? undefined : triggerId);
 const optionId = (index: number) => `${effectiveListboxId}-option-${index}`;

 React.useEffect(() => {
 setListboxId(effectiveListboxId);
 }, [effectiveListboxId, setListboxId]);

 const scrollToItemOnSelectedIndexChange = () => {
 if (!isOpen) {
 setFocusedIndex(-1);
 return;
 }
 // Jest could not resolve `focusedItemRef.current` so we need to call scrollIntoView with ?.()
 focusedItemRef.current?.scrollIntoView?.({ block: 'nearest' });
 };

 React.useEffect(scrollToItemOnSelectedIndexChange, [focusedIndex, isOpen]);
 React.useEffect(() => setFocusedIndex(0), [options.length]);
 // Reset the highlighted option to the top of the list whenever the filtered
 // results change while searching. Intentionally keyed only on the result
 // count so it does not fight floating-ui's highlight-on-open behavior.
 React.useEffect(() => {
 if (!comparator) {
 containerRef?.current?.focus();
 }

 if (isOpen) {
 setFocusedIndex(options.findIndex(o => o.value === value));
 // Jest could not resolve `focusedItemRef.current` so we need to call scrollIntoView with ?.()
 focusedItemRef.current?.scrollIntoView?.({ block: 'nearest' });
 return;
 setActiveIndex(0);
 }
 }, [isOpen]);
 // eslint-disable-next-line react-hooks/exhaustive-deps
 }, [options.length]);

 const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
 if (e.key === 'ArrowUp') {
 e.preventDefault();
 if (isOpen) {
 return setFocusedIndex((i = 0) => (i === 0 ? options.length - 1 : i - 1));
 }
 return onTriggerClick();
 React.useEffect(() => {
 if (isOpen && !comparator) {
 containerRef.current?.focus();
 }
 }, [isOpen, comparator]);

 if (e.key === 'ArrowDown') {
 const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
 if (e.key === 'Enter' && activeIndex != null && activeIndex >= 0) {
 e.preventDefault();
 if (isOpen) {
 if (onReachEnd && focusedIndex === options.length - 1) {
 onReachEnd();
 return;
 }
 return setFocusedIndex((i = 0) => (i === options.length - 1 ? 0 : i + 1));
 const option = options[activeIndex];
 if (option) {
 select(option);
 }
 return onTriggerClick();
 return;
 }

 if (e.key === 'Enter' && focusedIndex >= 0) {
 e.preventDefault();
 return select(options[focusedIndex]);
 if (e.key === 'ArrowDown' && onReachEnd && activeIndex === options.length - 1) {
 onReachEnd();
 }
 };

 // floating-ui exposes the active option through `aria-activedescendant`, but
 // it puts it on this (unfocused) wrapper. Lift it onto the element that
 // actually holds focus: the listbox in select mode, the search input in
 // combobox mode.
 const { 'aria-activedescendant': rawActiveDescendant, ...floatingProps } = getFloatingProps(
 popoverCtx.getFloatingProps({ onKeyDown }),
 );
 // SAFETY: floating-ui types its prop getters as Record<string, unknown>. The
 // active descendant is the id string of the active option, or undefined.
 const activeDescendant = rawActiveDescendant as string | undefined;

 return (
 <Popover
 nodeId={nodeId}
Expand All@@ -361,7 +387,7 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 elementDescriptor={descriptors.selectOptionsContainer}
 elementId={descriptors.selectOptionsContainer.setId(elementId)}
 ref={floating}
 {...getFloatingProps({ onKeyDown })}
 {...floatingProps}
 direction='col'
 justify='start'
 sx={[
Expand All@@ -381,6 +407,11 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 {comparator && (
 <SelectSearchbar
 placeholder={searchPlaceholder}
 role='combobox'
 aria-expanded={isOpen}
 aria-controls={effectiveListboxId}
 aria-autocomplete='list'
 aria-activedescendant={activeDescendant}
 {...searchInputProps}
 />
 )}
Expand All@@ -391,6 +422,7 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 role='listbox'
 aria-label={ariaLabel}
 aria-labelledby={effectiveAriaLabelledBy}
 aria-activedescendant={comparator ? undefined : activeDescendant}
 tabIndex={comparator ? undefined : 0}
 sx={[
 theme => ({
Expand All@@ -404,24 +436,27 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 ]}
 {...rest}
 >
 {options.map((option, index) => {
 const isFocused = index === focusedIndex;
 const isSelected = value === option.value;

 return (
 <SelectRenderOption
 key={option.value}
 index={index}
 ref={isFocused ? focusedItemRef : undefined}
 option={option}
 renderOption={renderOption}
 isSelected={isSelected}
 isFocused={isFocused}
 handleSelect={select}
 elementId={elementId}
 />
 );
 })}
 <FloatingList elementsRef={elementsRef}>
 {options.map((option, index) => {
 const isFocused = index === activeIndex;
 const isSelected = value === option.value;

 return (
 <SelectRenderOption
 key={option.value}
 index={index}
 id={optionId(index)}
 option={option}
 renderOption={renderOption}
 getItemProps={getItemProps}
 isSelected={isSelected}
 isFocused={isFocused}
 handleSelect={select}
 elementId={elementId}
 />
 );
 })}
 </FloatingList>
 {noResultsMessage && options.length === 0 && <SelectNoResults>{noResultsMessage}</SelectNoResults>}
 {footer}
 </Flex>
Expand All@@ -447,6 +482,7 @@ export const SelectButton = (
 generatedTriggerId,
 listboxId,
 setTriggerId,
 getReferenceProps,
 } = useSelectState();
 const { reference, isOpen } = popoverCtx;
 const effectiveTriggerId = id ?? generatedTriggerId;
Expand All@@ -468,7 +504,7 @@ export const SelectButton = (
 id={effectiveTriggerId}
 variant='outline'
 textVariant='buttonLarge'
onClick={onTriggerClick}
{...getReferenceProps({ onClick: onTriggerClick })}
 aria-expanded={isOpen}
 aria-haspopup='listbox'
 aria-controls={ariaControls ?? (isOpen ? listboxId : undefined)}
Expand Down
Loading
Loading