Skip to content

Fix/searchfield clear focus - #10830

Open
MoritzNeugebauer wants to merge 3 commits into
adobe:mainfrom
MoritzNeugebauer:fix/searchfield-clear-focus
Open

MoritzNeugebauer wants to merge 3 commits into
adobe:mainfrom
MoritzNeugebauer:fix/searchfield-clear-focus

Conversation

@MoritzNeugebauer

Copy link
Copy Markdown

Closes #10806

Summary

Clearing a populated, unfocused SearchField should not move focus into the
input or unexpectedly open the virtual keyboard. Clearing an already
focused SearchField should preserve its focus.

This change removes the clear button's explicit onPressStart focus call
and relies on the existing preventFocusOnPress: true behavior.
The clear action and disabled/read-only behavior remain unchanged.

Adds React Aria Components regression tests for both focus states using
mouse and touch pointer interactions. Existing hook and Spectrum tests
are updated to reflect the intentional focus behavior change.

AI assistance was used to implement the tests, update existing tests,
run verification, and draft this description. The assistant was provided
with AGENTS.md and the repository contribution guidelines.

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices
  • I understand every change in this PR and can explain why it's there.
  • If AI-assisted, I followed our AI contribution guidance and pointed my assistant at AGENTS.md.

Unit tests were added/updated. No Storybook or documentation changes
were made because this fixes interaction behavior without adding a new
API or visual state.

📝 Test Instructions:

Manual verification on iOS Safari

  1. Render a SearchField and enter a search value.
  2. Move focus to another focusable element.
  3. Tap the clear button. Verify that the value clears on the first tap
    without opening the virtual keyboard or activating nearby controls.
  4. Enter another value and keep the SearchField focused.
  5. Tap the clear button. Verify that the value clears and the input
    remains focused, with the keyboard open and the cursor in the input.

I manually verified the corrected behavior on an iPhone, including
preserving the keyboard and cursor when clearing an already focused input.

Automated verification

  • yarn test --maxWorkers=2: 384 suites passed; 8151 tests passed,
    16 skipped.
  • yarn test:ssr: 60 suites and 74 tests passed.
  • yarn lint: passed, including formatting and type checks.
  • Ran yarn format only on the four changed SearchField files.
  • yarn test:browser: 388 passed, 44 failed, 63 skipped. Failures
    occurred in other components, including timeouts; their causes were
    not investigated as part of this change.
  • Chromatic VRT suites were not run.

Temporarily restoring the old handler caused both unfocused-field
regression tests (mouse and touch) to fail because the input received
focus. Both focused-field tests continued to pass. After restoring the
fix, all 12 tests in the RAC SearchField suite passed.

DOM tests cover value and focus changes, not the actual iOS virtual
keyboard or Safari-specific touch behavior.

🧢 Your Project:

N/A

reidbarber
reidbarber previously approved these changes Oct 22, 2026

@reidbarber reidbarber left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Tested on iOS Safari and it seems to fix it without regressions. LGTM.

@snowystinger

Copy link
Copy Markdown
Member

@snowystinger snowystinger left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Tested on iOS with VO and ran into some problems. When I move the AT cursor to the clear button, the keyboard disappears (expected) but when I click the clear button, focus is lost. I think it should go to the input in this case. So we'll want to leave the event and instead try

  let onPressStart = e => {
    // so that AT focus isn't lost after the button disappears
    if (e.pointerType === 'virtual') {
      inputRef.current?.focus();
    }
  };

@MoritzNeugebauer

MoritzNeugebauer commented Oct 23, 2026 •

Copy link
Copy Markdown
Author

Please note, that the current proposed fix also changes the behavior of mouse usage. Currently, when using the mouse to clear the input when the searchfield does not have focus, the searchfield gets focused. With the proposed fix, this behavior changes so that the searchfield does not get focused.

The longer I think about it the more I think that for all three input types (mouse, touch, AT cursor) the searchfield should receive focus after the clear button is pressed regardless of whether the searchfield had focus when clicking the clear button.

What do you think?

MoritzNeugebauer and others added 2 commits October 23, 2026 15:09
fix: avoid forcing input focus when clearing a SearchField

Remove the clear button's onPressStart handler, which unconditionally
focused the input and could open the virtual keyboard on iOS Safari
instead of clearing the field.

Keep preventFocusOnPress so an already focused input retains focus
and the virtual keyboard stays open when cleared.

Fixes adobe#10806
Add mouse and touch regression tests for clearing focused and unfocused
search fields. Update existing hook and Spectrum tests to no longer
expect clearing to focus the input.
@MoritzNeugebauer
MoritzNeugebauer force-pushed the fix/searchfield-clear-focus branch from de9c1ad to 173a274 Compare October 23, 2026 13:09
Focus the input on virtual press start so assistive technology focus is not lost when the clear button disappears. Keep mouse and touch clearing from forcing input focus.

Add a regression test for virtual activation with a disappearing clear button.
@MoritzNeugebauer

MoritzNeugebauer commented Oct 23, 2026 •

Copy link
Copy Markdown
Author

I just pushed your suggested changes. Feel free to try it out. In the meantime I'll have to figure out with my company how to deal with that CLA.

@snowystinger

Copy link
Copy Markdown
Member

for all three input types (mouse, touch, AT cursor) the searchfield should receive focus after the clear button is pressed regardless of whether the searchfield had focus when clicking the clear button.

That would be the behaviour today?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

SearchField clear button on iOS Safari triggers virtual keyboard instead of clearing input

3 participants