Skip to content
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

Fixed EuiSuperDatePicker input focus. #3154

Merged
merged 15 commits into from
Apr 7, 2020
Merged

Fixed EuiSuperDatePicker input focus. #3154

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
ff927ad
fixed bug in input focus
ashikmeerankutty Mar 21, 2020
6f630c5
Merge branch 'master' into fix/tabs
ashikmeerankutty Mar 24, 2020
bba6d26
added cl
ashikmeerankutty Mar 24, 2020
96f3d7e
Merge branch 'master' into fix/tabs
ashikmeerankutty Mar 29, 2020
3d27764
Fixed InitializeFocus stealing focus in EuiTabbedContent
ashikmeerankutty Mar 29, 2020
84cae0a
Merge branch 'master' into fix/tabs
ashikmeerankutty Apr 3, 2020
137e78e
moved onFocus to EuiTabs
ashikmeerankutty Apr 3, 2020
d9c21cf
updated jest snapshots
ashikmeerankutty Apr 3, 2020
77e4aad
Merge branch 'master' into fix/tabs
ashikmeerankutty Apr 4, 2020
1470d3e
retain ref in div and forward ref in EuiTab
ashikmeerankutty Apr 4, 2020
16a6c8b
updated jest snapshot
ashikmeerankutty Apr 4, 2020
c4d8df9
removed ref in div
ashikmeerankutty Apr 4, 2020
28b621f
renamed divRef to tabsRef
ashikmeerankutty Apr 6, 2020
6873a86
updated cl
ashikmeerankutty Apr 6, 2020
9e41935
Update CHANGELOG.md
cchaos Apr 6, 2020
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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ No public interface changes since `22.3.0`.

**Bug Fixes**

- Fixed bug in `EuiSuperDatePicker` that required two clicks to focus input in relative tab ([#3154](https://github.com/elastic/eui/pull/3154))
- Fixed bug in `EuiSuperDatePicker` not showing correct values in relative tab of end date ([#3132](https://github.com/elastic/eui/pull/3132))
- Fixed bug in `EuiSuperDatePicker` to show correct values of commonly used values in relative tab ([#3106](https://github.com/elastic/eui/pull/3106))
- Fixed race condition in `EuiIcon` when switching from dynamically fetched components ([#3118](https://github.com/elastic/eui/pull/3118))
Expand Down
9 changes: 5 additions & 4 deletions src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,12 +75,13 @@ exports[`EuiTabbedContent behavior when uncontrolled, the selected tab should up
]
}
>
<div
onFocus={[Function]}
>
<EuiTabs>
<div>
<EuiTabs
onFocus={[Function]}
>
<div
className="euiTabs"
onFocus={[Function]}
role="tablist"
>
<EuiTab
Expand Down
12 changes: 6 additions & 6 deletions src/components/tabs/tabbed_content/tabbed_content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,12 +172,12 @@ export class EuiTabbedContent extends Component<
const { content: selectedTabContent, id: selectedTabId } = selectedTab!;

return (
<div
ref={this.divRef}
className={className}
{...rest}
onFocus={this.initializeFocus}>
<EuiTabs expand={expand} display={display} size={size}>
<div ref={this.divRef} className={className} {...rest}>
cchaos marked this conversation as resolved.
Show resolved Hide resolved
<EuiTabs
expand={expand}
display={display}
size={size}
onFocus={this.initializeFocus}>
Copy link
Contributor

Choose a reason for hiding this comment

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

@ashikmeerankutty I talked with @chandlerprall and we came to the conclusion that the divRef is still need in order to allow tabbing through all of the tabs. But that it should also be move to <EuiTabs>. By doing so you'll most likely need to modify EuiTabs to forwardRef to the containing div.

Copy link
Contributor Author

@ashikmeerankutty ashikmeerankutty Apr 4, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

@cchaos Thanks for the comment. Moved divRef to EuiTabs. Do I need to rename divRef to tabRef for readability?

Copy link
Contributor

Choose a reason for hiding this comment

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

I think that would help a lot. Perhaps even tabsRef (plural) so it's more obvious that it's on the whole EuiTabs component.

{tabs.map((tab: EuiTabbedContentTab) => {
const {
id,
Expand Down