Skip to content

[EuiComboBox] autoFocus behavior#4772

Merged
thompsongl merged 4 commits intoelastic:masterfrom
thompsongl:combobox-autofocus
Apr 30, 2021
Merged

[EuiComboBox] autoFocus behavior#4772
thompsongl merged 4 commits intoelastic:masterfrom
thompsongl:combobox-autofocus

Conversation

@thompsongl
Copy link
Copy Markdown
Contributor

@thompsongl thompsongl commented Apr 30, 2021 •
edited
Loading

Summary

Adds a top-level autoFocus prop that gets passed through to the input, enabling native HTML autofocus behavior.

Checklist

- [ ] Check against all themes for compatibility in both light and dark modes
- [ ] Checked in mobile

  • Checked in Chrome, Safari, Edge, and Firefox
  • Props have proper autodocs and playground toggles

- [ ] Added documentation

  • Checked Code Sandbox works for the any docs examples
  • Added or updated jest tests
  • Checked for breaking changes and labeled appropriately
  • Checked for accessibility including keyboard-only and screenreader modes
  • A changelog entry exists and is marked appropriately

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Apr 30, 2021

Preview documentation changes for this PR: https://eui.elastic.co/pr_4772/

cchaos
cchaos approved these changes Apr 30, 2021
View reviewed changes
Copy link
Copy Markdown
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

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

LGTM. Tested the temporary example (in Chrome only). Have you also tested this behavior in portal content like popover or flyout?

@thompsongl @cchaos
Apply suggestions from code review
450ec77 
Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
@thompsongl
Copy link
Copy Markdown
Contributor Author

thompsongl commented Apr 30, 2021

Have you also tested this behavior in portal content like popover or flyout?

I haven't but I will. Popovers, portals, etc. have their own initial focus methods that are more heavy-handed and will likely take precedence.

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Apr 30, 2021

Preview documentation changes for this PR: https://eui.elastic.co/pr_4772/

@thompsongl
Copy link
Copy Markdown
Contributor Author

thompsongl commented Apr 30, 2021 •
edited
Loading

Popovers, portals, etc. have their own initial focus methods that are more heavy-handed and will likely take precedence.

I was incorrect. autoFocus works in modals and flyouts, and takes precedence over those initial focus methods. This is true for any component or DOM element that supports autoFocus (basically all EUI form controls, now including EuiComboBox).

@cchaos
Copy link
Copy Markdown
Contributor

cchaos commented Apr 30, 2021

I think that makes the most sense?

@thompsongl
Copy link
Copy Markdown
Contributor Author

thompsongl commented Apr 30, 2021

I think that makes the most sense?

I agree. Use/mimic the native browser API as much as possible.

@thompsongl thompsongl merged commit 658e5d2 into elastic:master Apr 30, 2021
cchaos added a commit that referenced this pull request May 4, 2021
@thompsongl @cchaos
[EuiComboBox] autoFocus behavior (#4772)
f559c9e 
* add autoFocus

* revert me

* CL

* Apply suggestions from code review

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
@streamich streamich mentioned this pull request May 5, 2021
Closed
@thompsongl thompsongl mentioned this pull request May 5, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@cchaos cchaos cchaos approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@thompsongl @kibanamachine @cchaos