Skip to content

fix(components): Improve Focus and Blur Experience on Autocomplete v2 #2809

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
merged 29 commits into from
Nov 28, 2025
Merged

fix(components): Improve Focus and Blur Experience on Autocomplete v2 #2809

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
1b49367
Don't call onBlur when clicking within the floating menu
jdeichert Nov 7, 2025
fbfc8a1
Add test
jdeichert Nov 10, 2025
f3e2dea
Merge branch 'master' into JOB-141426/fix-autocomplete-onblur-issue
jdeichert Nov 10, 2025
5cc8061
use approach preventing focus rather than blur
ZakaryH Nov 24, 2025
dcfba2f
Revert "use approach preventing focus rather than blur"
ZakaryH Nov 26, 2025
c96f3d5
add blur related tests
ZakaryH Nov 26, 2025
8912561
Revert "add blur related tests"
ZakaryH Nov 26, 2025
1c46824
Reapply "use approach preventing focus rather than blur"
ZakaryH Nov 26, 2025
20d4787
fix focus management, fix tests, add new POM method
ZakaryH Nov 26, 2025
e3ac533
improve openOnFocus assertions
ZakaryH Nov 26, 2025
fee17f3
improve test clarity and quality
ZakaryH Nov 26, 2025
6ec26b6
add coverage for new open/click behavior
ZakaryH Nov 26, 2025
a9278ff
colocate ref logic to avoid passing around
ZakaryH Nov 26, 2025
ae234a6
reuse existing ref
ZakaryH Nov 26, 2025
d0ad2a6
use useClick rather than a separate system to open menu on click
ZakaryH Nov 26, 2025
1b1658d
swap off alerts to a text based 'last action' feedback mechanism to a…
ZakaryH Nov 27, 2025
07f910a
prevent issue with other non interactive elements
ZakaryH Nov 27, 2025
7609a3b
remove redundant focus tracking variable
ZakaryH Nov 27, 2025
2995e7f
remove debouce on clear to improve UX
ZakaryH Nov 27, 2025
ee803fd
move flag resetting to improve onFocus behavior too
ZakaryH Nov 27, 2025
33bc739
merge master, resolve conflicts
ZakaryH Nov 27, 2025
e37f5b8
add blur and focus logging to example to validate behavior
ZakaryH Nov 27, 2025
7d184b0
add example to illustrate focus behavior
ZakaryH Nov 27, 2025
2ae0880
swap to onPointerDown for better compatibility
ZakaryH Nov 28, 2025
8e3191e
clean up example for typos and usability
ZakaryH Nov 28, 2025
d043ec9
remove refs from deps, avoid casting
ZakaryH Nov 28, 2025
a776c22
add context to openOnFocus behavior
ZakaryH Nov 28, 2025
ddeea9f
unify event prevention, colocate methods in util file
ZakaryH Nov 28, 2025
74dd037
regen props
ZakaryH Nov 28, 2025
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
22 changes: 13 additions & 9 deletions docs/components/Autocomplete/WebV2.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,7 @@ const TemplateSectioned: ComponentStory<typeof Autocomplete> = () => {
placeholder="Search"
value={value}
onChange={setValue}
onBlur={() => console.log("blurred")}
inputValue={inputValue}
onInputChange={setInputValue}
menu={sectionedMenu}
Expand All @@ -160,6 +161,7 @@ const TemplateWithActions: ComponentStory<typeof Autocomplete> = () => {
placeholder="Search"
value={value}
onChange={setValue}
onBlur={() => console.log("blurred")}
inputValue={inputValue}
onInputChange={setInputValue}
menu={defineMenu<OptionLike>([
Expand All @@ -171,7 +173,7 @@ const TemplateWithActions: ComponentStory<typeof Autocomplete> = () => {
{
type: "action",
label: "Add Service",
onClick: () => alert("Add Service"),
onClick: () => console.log("Add Service"),
Copy link
Contributor

@ZakaryH ZakaryH Nov 26, 2025

Choose a reason for hiding this comment

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

I need to double check if this change is required. with one implementation I had that used setTimeouts - the timing was getting interrupted by the alert which has a different execution flow from "standard" code

Copy link
Contributor

@ZakaryH ZakaryH Nov 27, 2025

Choose a reason for hiding this comment

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

ok yes, using alert is problematic when attempting to verify the onBlur behavior. it has atypical behavior, interrupting the event loop delaying execution and firing focus events.

I've implemented a simple text based feedback system that says what your last action was instead.

},
],
},
Expand All @@ -183,7 +185,7 @@ const TemplateWithActions: ComponentStory<typeof Autocomplete> = () => {
{
type: "action",
label: "Add Outdoor Service",
onClick: () => alert("Add Outdoor Service"),
onClick: () => console.log("Add Outdoor Service"),
},
],
},
Expand All @@ -195,7 +197,7 @@ const TemplateWithActions: ComponentStory<typeof Autocomplete> = () => {
{
type: "action",
label: "Add Extras Service",
onClick: () => alert("Add Extras Service"),
onClick: () => console.log("Add Extras Service"),
},
],
},
Expand Down Expand Up @@ -307,6 +309,7 @@ const TemplateHeaderFooter: ComponentStory<typeof Autocomplete> = () => {
placeholder="Search"
value={value}
onChange={setValue}
onBlur={() => console.log("blurred")}
inputValue={inputValue}
onInputChange={setInputValue}
menu={defineMenu<OptionLike>([
Expand All @@ -315,10 +318,11 @@ const TemplateHeaderFooter: ComponentStory<typeof Autocomplete> = () => {
{
type: "footer",
label: "Pinned footer",
onClick: () => alert("Footer"),
onClick: () => console.log("Footer"),
},
])}
/>
<input type="text" />
</Content>
);
};
Expand Down Expand Up @@ -540,7 +544,7 @@ const customActions: MenuAction<ActionExtraProps>[] = [
type: "action",
label: "Add Service",
icon: "plus",
onClick: () => alert("Add"),
onClick: () => console.log("Add"),
},
];

Expand All @@ -549,7 +553,7 @@ const customActions2: MenuAction<ActionExtraProps>[] = [
type: "action",
label: "Add Other",
icon: "plus",
onClick: () => alert("Add"),
onClick: () => console.log("Add"),
},
];

Expand All @@ -563,15 +567,15 @@ const emptyActions: MenuAction<ActionExtraProps>[] = [
type: "action",
label: "Favorite",
icon: "star",
onClick: () => alert("Add"),
onClick: () => console.log("Add"),
},
];

const customFooter: MenuFooter<ActionExtraProps> = {
type: "footer",
label: "Adjust prices",
icon: "edit",
onClick: () => alert("Footer"),
onClick: () => console.log("Footer"),
};

interface SectionExtraProps {
Expand Down Expand Up @@ -699,7 +703,7 @@ const TemplateEverythingCustomized: ComponentStory<
suffix={{
icon: "search",
ariaLabel: "Search",
onClick: () => alert("Search"),
onClick: () => console.log("Search"),
}}
/>
);
Expand Down
12 changes: 12 additions & 0 deletions packages/components/src/Autocomplete/Autocomplete.pom.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,18 @@ export function getSelectedOption() {
) as HTMLElement | null;
}

export function getInput() {
return screen.getByRole("combobox") as HTMLInputElement;
}

export async function clickOnElement(text: string) {
await user.click(screen.getByText(text));
}

export async function clickOnInput() {
await user.click(getInput());
}

/**
* Wait until the Autocomplete menu is visible (accounts for transitions)
*/
Expand Down
Loading
Loading