diff --git a/src/components/tabs/tabbed_content/tabbed_content.tsx b/src/components/tabs/tabbed_content/tabbed_content.tsx
index e60cc31f3c2..1a5361019c4 100644
--- a/src/components/tabs/tabbed_content/tabbed_content.tsx
+++ b/src/components/tabs/tabbed_content/tabbed_content.tsx
@@ -6,7 +6,13 @@
* Side Public License, v 1.
*/
-import React, { Component, createRef, HTMLAttributes, ReactNode } from 'react';
+import React, {
+ Component,
+ createRef,
+ HTMLAttributes,
+ ReactNode,
+ FocusEvent,
+} from 'react';
import { htmlIdGenerator } from '../../../services';
@@ -90,28 +96,6 @@ export class EuiTabbedContent extends Component<
};
}
- componentDidMount() {
- // IE11 doesn't support the `relatedTarget` event property for blur events
- // but does add it for focusout. React doesn't support `onFocusOut` so here we are.
- if (this.tabsRef.current) {
- // Current short-term solution for event listener (see https://github.com/elastic/eui/pull/2717)
- this.tabsRef.current.addEventListener(
- 'focusout' as 'blur',
- this.removeFocus
- );
- }
- }
-
- componentWillUnmount() {
- if (this.tabsRef.current) {
- // Current short-term solution for event listener (see https://github.com/elastic/eui/pull/2717)
- this.tabsRef.current.removeEventListener(
- 'focusout' as 'blur',
- this.removeFocus
- );
- }
- }
-
focusTab = () => {
const targetTab: HTMLDivElement | null = this.tabsRef.current!.querySelector(
`#${this.state.selectedTabId}`
@@ -129,8 +113,7 @@ export class EuiTabbedContent extends Component<
}
};
- // todo: figure out type for blurEvent
- removeFocus = (blurEvent: FocusEvent) => {
+ removeFocus = (blurEvent: FocusEvent) => {
// only set inFocus to false if the wrapping div doesn't contain the now-focusing element
const currentTarget = blurEvent.currentTarget! as HTMLElement;
const relatedTarget = blurEvent.relatedTarget! as HTMLElement;
@@ -185,6 +168,7 @@ export class EuiTabbedContent extends Component<
expand={expand}
size={size}
onFocus={this.initializeFocus}
+ onBlur={this.removeFocus}
>
{tabs.map((tab: EuiTabbedContentTab) => {
const {
diff --git a/upcoming_changelogs/6162.md b/upcoming_changelogs/6162.md
new file mode 100644
index 00000000000..3c8bf4bf086
--- /dev/null
+++ b/upcoming_changelogs/6162.md
@@ -0,0 +1,3 @@
+**Breaking changes**
+
+- Removed all IE fixes/fallbacks in EUI JS