Skip to content

feat: add onFocusEnter, onFocusLeave, onEscape callback props #4259

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

Open
mxschll wants to merge 4 commits into
base: main
Choose a base branch
from
+356 −66
Open

feat: add onFocusEnter, onFocusLeave, onEscape callback props #4259

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e09b121
feat: add onFocusIn and onFocusOut
mxschll Feb 16, 2026
bee3915
feat: add onEscape handler
mxschll Feb 18, 2026
413dba5
fix: add onEscape if callback provided
mxschll Feb 18, 2026
c9c9752
refactor: rename focus callbacks
mxschll Feb 18, 2026
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
2 changes: 1 addition & 1 deletion pages/calendar/simple.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function CalendarPage() {
maxWidth="trigger"
stretchHeight={true}
open={true}
onDropdownClose={() => {}}
onOutsideClick={() => {}}
onMouseDown={() => {}}
trigger={null}
content={
Expand Down
2 changes: 1 addition & 1 deletion pages/date-range-picker/month-calendar-permutations.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export default function DateRangePickerCalendarPage() {
<Dropdown
stretchHeight={true}
open={true}
onDropdownClose={() => {}}
onOutsideClick={() => {}}
onMouseDown={() => {}}
trigger={null}
content={
Expand Down
2 changes: 1 addition & 1 deletion pages/date-range-picker/year-calendar-permutations.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export default function DateRangePickerCalendarPage() {
<Dropdown
stretchHeight={true}
open={true}
onDropdownClose={() => {}}
onOutsideClick={() => {}}
onMouseDown={() => {}}
trigger={null}
content={
Expand Down
2 changes: 1 addition & 1 deletion pages/dropdown/common.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export function SampleDropdown({ id, children }: { id: string; children: React.R
</Button>
}
open={isOpened}
onDropdownClose={() => setOpened(false)}
onOutsideClick={() => setOpened(false)}
content={children}
/>
);
Expand Down
2 changes: 1 addition & 1 deletion pages/dropdown/fixed-container.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export default function () {
</button>
}
open={open}
onDropdownClose={() => setOpen(false)}
onOutsideClick={() => setOpen(false)}
content={<ListContent n={5} />}
minWidth={'trigger'}
/>
Expand Down
2 changes: 1 addition & 1 deletion pages/dropdown/focus-trap.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export default function DropdownScenario() {
</Button>
}
open={isOpen}
onDropdownClose={() => setIsOpen(false)}
onOutsideClick={() => setIsOpen(false)}
header={
<div style={{ padding: 8 }}>
<Button disabled={disableHeader}>header-1</Button>
Expand Down
16 changes: 8 additions & 8 deletions pages/dropdown/interior-fitting.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export default function DropdownScenario() {
</Button>
}
open={openParent1}
onDropdownClose={() => setOpenParent1(false)}
onOutsideClick={() => setOpenParent1(false)}
content={
<ul className={styles.list}>
<li id="childDropdown1">
Expand All @@ -53,7 +53,7 @@ export default function DropdownScenario() {
</div>
}
open={openChild1}
onDropdownClose={() => setOpenChild1(false)}
onOutsideClick={() => setOpenChild1(false)}
content={<ListContent n={5} withSpaces={true} repeat={8} />}
/>
</li>
Expand All @@ -72,7 +72,7 @@ export default function DropdownScenario() {
</Button>
}
open={openParent2}
onDropdownClose={() => setOpenParent2(false)}
onOutsideClick={() => setOpenParent2(false)}
content={
<ul className={styles.list} style={{ overflowY: 'auto', blockSize: '100px' }}>
<li id="childDropdown2">
Expand All @@ -85,7 +85,7 @@ export default function DropdownScenario() {
</div>
}
open={openChild2}
onDropdownClose={() => setOpenChild2(false)}
onOutsideClick={() => setOpenChild2(false)}
content={<ListContent n={5} withSpaces={true} repeat={8} />}
/>
</li>
Expand All @@ -104,7 +104,7 @@ export default function DropdownScenario() {
</Button>
}
open={openParent3}
onDropdownClose={() => setOpenParent3(false)}
onOutsideClick={() => setOpenParent3(false)}
content={
<ul className={styles.list}>
<li id="childDropdown3">
Expand All @@ -117,7 +117,7 @@ export default function DropdownScenario() {
</div>
}
open={openChild3}
onDropdownClose={() => setOpenChild3(false)}
onOutsideClick={() => setOpenChild3(false)}
content={<ListContent n={5} withSpaces={true} repeat={8} />}
/>
</li>
Expand All @@ -140,7 +140,7 @@ export default function DropdownScenario() {
</Button>
}
open={openParent4}
onDropdownClose={() => setOpenParent4(false)}
onOutsideClick={() => setOpenParent4(false)}
content={
<ul className={styles.list}>
<li id="childDropdown4">
Expand All @@ -153,7 +153,7 @@ export default function DropdownScenario() {
</div>
}
open={openChild4}
onDropdownClose={() => setOpenChild4(false)}
onOutsideClick={() => setOpenChild4(false)}
content={<ListContent n={5} withSpaces={true} repeat={8} />}
/>
</li>
Expand Down
6 changes: 3 additions & 3 deletions pages/dropdown/interior-stretch-height.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export default function DropdownScenario() {
</Button>
}
open={openParent1}
onDropdownClose={() => setOpenParent1(false)}
onOutsideClick={() => setOpenParent1(false)}
content={<ListContent n={15} withSpaces={true} repeat={20} />}
/>
</div>
Expand All @@ -60,7 +60,7 @@ export default function DropdownScenario() {
</Button>
}
open={openParent2}
onDropdownClose={() => setOpenParent2(false)}
onOutsideClick={() => setOpenParent2(false)}
content={<ListContent n={15} withSpaces={true} repeat={20} />}
/>
</div>
Expand All @@ -80,7 +80,7 @@ export default function DropdownScenario() {
</Button>
}
open={openParent3}
onDropdownClose={() => setOpenParent3(false)}
onOutsideClick={() => setOpenParent3(false)}
content={
<div style={{ inlineSize: '400px' }}>
<ListContent n={15} withSpaces={true} repeat={20} />
Expand Down
8 changes: 4 additions & 4 deletions pages/dropdown/interior-with-wrapping.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default function DropdownScenario() {
</Button>
}
open={openParent5}
onDropdownClose={() => setOpenParent5(false)}
onOutsideClick={() => setOpenParent5(false)}
content={
<ul className={styles.list}>
<li id="childDropdown5">
Expand All @@ -50,7 +50,7 @@ export default function DropdownScenario() {
</div>
}
open={openChild5}
onDropdownClose={() => setOpenChild5(false)}
onOutsideClick={() => setOpenChild5(false)}
content={<ListContent n={5} withSpaces={true} repeat={18} />}
/>
</li>
Expand All @@ -73,7 +73,7 @@ export default function DropdownScenario() {
</Button>
}
open={openParent6}
onDropdownClose={() => setOpenParent6(false)}
onOutsideClick={() => setOpenParent6(false)}
content={
<ul className={styles.list}>
<li id="childDropdown6">
Expand All @@ -86,7 +86,7 @@ export default function DropdownScenario() {
</div>
}
open={openChild6}
onDropdownClose={() => setOpenChild6(false)}
onOutsideClick={() => setOpenChild6(false)}
content={<ListContent n={5} withSpaces={true} repeat={18} />}
/>
</li>
Expand Down
2 changes: 1 addition & 1 deletion pages/dropdown/list-with-sticky-item.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export default function MultiselectPage() {
<Dropdown
trigger={<Button onClick={() => setOpen(!open)}>Open dropdown</Button>}
open={open}
onDropdownClose={() => setOpen(false)}
onOutsideClick={() => setOpen(false)}
expandToViewport={urlParams.expandToViewport}
header={
urlParams.withHeader ? (
Expand Down
2 changes: 1 addition & 1 deletion pages/dropdown/min-width.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export default function DropdownScenario() {
</div>
}
open={open}
onDropdownClose={() => setOpen(false)}
onOutsideClick={() => setOpen(false)}
minWidth={800}
content={<ListContent n={10} />}
/>
Expand Down
10 changes: 5 additions & 5 deletions pages/dropdown/positioning.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export default function DropdownScenario() {
</Button>
}
open={open1}
onDropdownClose={() => setOpen1(false)}
onOutsideClick={() => setOpen1(false)}
content={<ListContent n={10} withSpaces={true} repeat={12} />}
/>
</div>
Expand All @@ -58,7 +58,7 @@ export default function DropdownScenario() {
</Button>
}
open={open2}
onDropdownClose={() => setOpen2(false)}
onOutsideClick={() => setOpen2(false)}
content={<ListContent n={10} withSpaces={true} repeat={12} />}
/>
</div>
Expand All @@ -73,7 +73,7 @@ export default function DropdownScenario() {
</Button>
}
open={open3}
onDropdownClose={() => setOpen3(false)}
onOutsideClick={() => setOpen3(false)}
content={<ListContent n={10} withSpaces={true} repeat={2} />}
/>
</div>
Expand All @@ -88,7 +88,7 @@ export default function DropdownScenario() {
</Button>
}
open={open4}
onDropdownClose={() => setOpen4(false)}
onOutsideClick={() => setOpen4(false)}
content={<ListContent n={10} withSpaces={true} repeat={22} />}
/>
</div>
Expand All @@ -107,7 +107,7 @@ export default function DropdownScenario() {
</Button>
}
open={open5}
onDropdownClose={() => setOpen5(false)}
onOutsideClick={() => setOpen5(false)}
content={<ListContent n={10} withSpaces={true} repeat={18} />}
/>
</div>
Expand Down
6 changes: 3 additions & 3 deletions pages/dropdown/prefer-center.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export default function DropdownScenario() {
</Button>
}
open={open1}
onDropdownClose={() => setOpen1(false)}
onOutsideClick={() => setOpen1(false)}
content={<ListContent n={10} withSpaces={true} repeat={12} />}
/>
</div>
Expand All @@ -51,7 +51,7 @@ export default function DropdownScenario() {
</Button>
}
open={open2}
onDropdownClose={() => setOpen2(false)}
onOutsideClick={() => setOpen2(false)}
content={<ListContent n={10} withSpaces={true} repeat={12} />}
/>
</div>
Expand All @@ -67,7 +67,7 @@ export default function DropdownScenario() {
</Button>
}
open={open3}
onDropdownClose={() => setOpen3(false)}
onOutsideClick={() => setOpen3(false)}
content={<ListContent n={10} withSpaces={true} repeat={12} />}
/>
</div>
Expand Down
8 changes: 4 additions & 4 deletions pages/dropdown/simple.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function DropdownScenario() {
Dropdown opens up or down depending on the size of the content and available space above and below the trigger
</li>
<li>
Dropdown fires an <code>onDropdownClose</code> event a click outside of the fly-out content
Dropdown fires an <code>onOutsideClick</code> event a click outside of the fly-out content
</li>
</ul>
<div id="smallDropDown">
Expand All @@ -32,7 +32,7 @@ export default function DropdownScenario() {
</Button>
}
open={open1}
onDropdownClose={() => setOpen1(false)}
onOutsideClick={() => setOpen1(false)}
content={<ListContent n={10} />}
/>
</div>
Expand All @@ -44,7 +44,7 @@ export default function DropdownScenario() {
</Button>
}
open={open2}
onDropdownClose={() => setOpen2(false)}
onOutsideClick={() => setOpen2(false)}
header={<div style={{ blockSize: '30px' }} />}
footer={<div className="footer" style={{ blockSize: '30px' }} />}
content={<ListContent n={100} />}
Expand All @@ -60,7 +60,7 @@ export default function DropdownScenario() {
</Button>
}
open={open3}
onDropdownClose={() => setOpen3(false)}
onOutsideClick={() => setOpen3(false)}
content={<ListContent n={10} />}
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion pages/options-list/simple.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export default function OptionsListScenario() {
Dropdown trigger
</Button>
}
onDropdownClose={toggleDropdown}
onOutsideClick={toggleDropdown}
content={
<OptionsList onLoadMore={handleLoadMore} id={'list'} open={open} statusType="pending">
{[...Array(50)].map((_, index) => (
Expand Down
2 changes: 1 addition & 1 deletion src/button-dropdown/internal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -364,7 +364,7 @@ const InternalButtonDropdown = React.forwardRef(
hideBlockBorder={false}
expandToViewport={expandToViewport}
preferCenter={preferCenter}
onDropdownClose={() => toggleDropdown()}
onOutsideClick={() => toggleDropdown()}
trigger={trigger}
dropdownId={dropdownId}
content={
Expand Down
2 changes: 1 addition & 1 deletion src/date-picker/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ const DatePicker = React.forwardRef(
maxWidth="trigger"
stretchHeight={true}
open={isDropDownOpen}
onDropdownClose={onDropdownCloseHandler}
onOutsideClick={onDropdownCloseHandler}
trigger={trigger}
expandToViewport={expandToViewport}
scrollable={false}
Expand Down
6 changes: 3 additions & 3 deletions src/date-range-picker/dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ interface DateRangePickerDropdownProps
Pick<CalendarProps, 'granularity'> {
onClear: () => void;
onApply: (value: null | DateRangePickerProps.Value) => DateRangePickerProps.ValidationResult;
onDropdownClose: () => void;
onOutsideClick: () => void;
isSingleGrid: boolean;
customAbsoluteRangeControl: DateRangePickerProps.AbsoluteRangeControl | undefined;
renderRelativeRangeContent: DateRangePickerProps.RelativeRangeControl | undefined;
Expand All @@ -75,7 +75,7 @@ export function DateRangePickerDropdown({
onApply: applyValue,
getTimeOffset,
timeOffset,
onDropdownClose,
onOutsideClick,
relativeOptions,
showClearButton,
isSingleGrid,
Expand Down Expand Up @@ -120,7 +120,7 @@ export function DateRangePickerDropdown({

const closeDropdown = () => {
setApplyClicked(false);
onDropdownClose();
onOutsideClick();
};

const onClear = () => {
Expand Down
4 changes: 2 additions & 2 deletions src/date-range-picker/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,7 +314,7 @@ const DateRangePicker = React.forwardRef(
<Dropdown
stretchHeight={true}
open={isDropDownOpen}
onDropdownClose={() => closeDropdown()}
onOutsideClick={() => closeDropdown()}
trigger={trigger}
expandToViewport={expandToViewport}
dropdownId={dropdownId}
Expand All @@ -326,7 +326,7 @@ const DateRangePicker = React.forwardRef(
startOfWeek={startOfWeek}
locale={normalizedLocale}
isSingleGrid={isSingleGrid}
onDropdownClose={() => closeDropdown(true)}
onOutsideClick={() => closeDropdown(true)}
value={value}
showClearButton={showClearButton}
isDateEnabled={isDateEnabled}
Expand Down
Loading
Loading