Skip to content

fix(#3800): MobileSearchAutocomplete: focused style persists on blur#3801

Merged
snowystinger merged 4 commits into
mainfrom
Issue-3800
Dec 20, 2022
Merged

fix(#3800): MobileSearchAutocomplete: focused style persists on blur#3801
snowystinger merged 4 commits into
mainfrom
Issue-3800

Conversation

@majornista
Copy link
Copy Markdown
Collaborator

@majornista majornista commented Nov 29, 2022

Closes #3800, Closes #3861

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue #3800.
  • 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

📝 Test Instructions:

  1. Open https://reactspectrum.blob.core.windows.net/reactspectrum/e6d26f6dcd1b1755c95ac2cd19ceb083d123dbc1/storybook/index.html?path=/story/searchautocomplete--static
  2. Open Developer Tools in web browser, and using the Responsive Design tools, select a breakpoint or device width that will render the SearchAutocomplete using the MobileSearchAutocomplete.
  3. Verify that using Tab key to set focus to the MobileSearchAutocomplete renders the focus-ring style.
  4. Pressing Tab again to blur the MobileSearchAutocomplete should remove the focus-ring style.

🧢 Your Project:

reidbarber
reidbarber previously approved these changes Nov 30, 2022
Copy link
Copy Markdown
Member

@reidbarber reidbarber left a comment

Choose a reason for hiding this comment

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

LGTM

return (
<div
{...mergeProps(hoverProps, focusProps, buttonProps)}
{...mergeProps(buttonProps, focusProps, hoverProps)}
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.

a bit odd that the order here actually mattered, will dig to see why. Ideally it shouldn't rely on the props merge order

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.

funny enough, it's due to this line here https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/interactions/src/useFocus.ts#L78, it should be undefined
the reason the order mattered with it though is due to how mergeProps works with event handler merging, if you pass null as an event handler, it will remove ALL event handlers of that name

https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/utils/src/mergeProps.ts#L45 typeof null is 'object' so we won't go down this path
instead, we'll fall through here https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/utils/src/mergeProps.ts#L66 and overwrite everything

I'm going to push the change to this branch

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

Labels

bug Something isn't working SearchAutocomplete small review Easy to review PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[react-aria] useTextField returns onBlur null instead of undefined MobileSearchAutocomplete: focused style persists on blur

4 participants