From 8d457ab2e19a510813396c5014937426835252de Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Thu, 11 Mar 2021 17:56:38 +0200 Subject: [PATCH] fix(docs-infra): fix `` in IE11 (#41183) Previously, `` did not work correctly in IE11. More specifically, due to how IE11 handles updates to `innerHTML`, the contents of `` elements were cleared before we could capture them and pass them to the `` components. This commit fixes it by ensuring we capture the `` contents before clearing unneeded HTML. Before: ![code tabs in IE11 before][1] After: ![code tabs in IE11 after][2] [1]: https://user-images.githubusercontent.com/8604205/110815248-f4460e00-8292-11eb-868e-eca7ba5e9cd3.png [2]: https://user-images.githubusercontent.com/8604205/110815253-f5773b00-8292-11eb-80a6-1a0b1ea44d8f.png PR Close #41183 --- aio/src/app/custom-elements/code/code-tabs.component.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/aio/src/app/custom-elements/code/code-tabs.component.ts b/aio/src/app/custom-elements/code/code-tabs.component.ts index 369216adbb..3ed2cc6d11 100644 --- a/aio/src/app/custom-elements/code/code-tabs.component.ts +++ b/aio/src/app/custom-elements/code/code-tabs.component.ts @@ -57,11 +57,17 @@ export class CodeTabsComponent implements OnInit, AfterViewInit { this.tabs = []; const contentElem = this.content.nativeElement; const codeExamples = Array.from(contentElem.querySelectorAll('code-pane')); - contentElem.innerHTML = ''; // Remove DOM nodes that are no longer needed. for (const tabContent of codeExamples) { this.tabs.push(this.getTabInfo(tabContent)); } + + // Remove DOM nodes that are no longer needed. + // + // NOTE: + // In IE11, doing this also empties the `` nodes captured in `codeExamples` ¯\_(ツ)_/¯ + // Only remove the unnecessary nodes after having captured the `` contents. + contentElem.innerHTML = ''; } ngAfterViewInit() {