fix: #1756 #1758 Fix IE11 issues, Safari issues, and Esc key working on compact layout (#1761)

* fix: #1756 #1758 Fix IE11 issues, Safari issues, and Esc key working on compact layout

* Removing more code causing errors in IE11

Co-authored-by: heyMP <[email protected]>

Author: wesruv

CHANGELOG-1.x.md

@@ -4,7 +4,8 @@
 - [b691da0](https://github.com/patternfly/patternfly-elements/commit/b691da07c4f3e150337698044369e64b9d2ad849) docs: Adjust example code block for typography classes
 - [974ab6f](https://github.com/patternfly/patternfly-elements/commit/974ab6f1ab4047d4e94007d64a31e5a0cddf9b7a) fix: typos in package.json files
 - [b18dd64](https://github.com/patternfly/patternfly-elements/commit/b18dd64da950b580b526ebe092b59eaadaf7d07e) fix: fix for re-renders when there is no selectedindex
-- [](https://github.com/patternfly/patternfly-elements/commit/) fix: added resize observer for lining up progress bar
+- [f727065](https://github.com/patternfly/patternfly-elements/commit/f72706530754d9ea27779796d87e227edd0c238e) fix: added resize observer for lining up progress bar
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Pfe-Primary-Detail - Fixed issues from Safari, IE11, and the escape key didn't work as expected in compact layout
 
 # 1.11.0 (2021-08-18)
 

elements/pfe-primary-detail/src/pfe-primary-detail.js

@@ -199,6 +199,11 @@ class PfePrimaryDetail extends PFElement {
     this.removeEventListener("keydown", this._keyboardControls);
   }
 
+  /**
+   * Adds active class to shadow DOM if component is active to avoid animation jank
+   * @note For some reason, when using :host([active]) to transformX, entering an active state got a janky animation.
+   * Using active class that lives in the shadow root does not  ¯\_(ツ)_/¯
+   */
   _manageWrapperAttributes() {
     if (this.hasAttribute("active")) {
       this._wrapper.classList.add("active");
@@ -256,7 +261,8 @@ class PfePrimaryDetail extends PFElement {
     this._slots.detailsNav[index] = toggle;
 
     if (createToggleButton) {
-      detailNavElement.replaceWith(toggle);
+      // Using replaceChild to avoid IE issues
+      detailNavElement.parentElement.replaceChild(toggle, detailNavElement);
     }
   }
 
@@ -492,7 +498,7 @@ class PfePrimaryDetail extends PFElement {
     const nextToggle = e.target;
 
     // Detect if handleHideShow was called by an event listener or manually in code
-    if (typeof e === "object" && Array.isArray(e.path)) {
+    if (typeof e === "object" && e instanceof Event) {
       // If the user has interacted with the component remove the pristine attribute
       this._wrapper.removeAttribute("data-pristine");
     }
@@ -522,7 +528,7 @@ class PfePrimaryDetail extends PFElement {
     newHeading.innerText = nextToggle.innerText;
     newHeading.id = this._detailsWrapperHeading.id;
     // Replace old heading
-    this._detailsWrapperHeading.replaceWith(newHeading);
+    this._detailsWrapperHeading.parentElement.replaceChild(newHeading, this._detailsWrapperHeading);
     this._detailsWrapperHeading = newHeading;
 
     // Make sure the aria-controls attribute is set to the details wrapper
@@ -654,14 +660,15 @@ class PfePrimaryDetail extends PFElement {
    */
   _keyboardControls(event) {
     const currentElement = event.target;
-
-    if (!this._isToggle(currentElement)) {
-      return;
-    }
-
     let newToggle;
 
     switch (event.key) {
+      case "Escape":
+        // Only closing all at compact sizes since something should always be selected at non-compact
+        if (this.getAttribute("breakpoint") === "compact") {
+          this.closeAll();
+        }
+        break;
       // case "Tab":
       // Tab (Default tab behavior)
       /// When focus moves into the tab list, places focus on the active tab element
@@ -672,6 +679,9 @@ class PfePrimaryDetail extends PFElement {
       case "Up":
       case "ArrowLeft":
       case "Left":
+        if (!this._isToggle(currentElement)) {
+          return;
+        }
         event.preventDefault(); // Prevent scrolling
         // Up Arrow/Left Arrow
         /// When tab has focus:
@@ -684,6 +694,9 @@ class PfePrimaryDetail extends PFElement {
       case "Down":
       case "ArrowRight":
       case "Right":
+        if (!this._isToggle(currentElement)) {
+          return;
+        }
         event.preventDefault(); // Prevent scrolling
         // Down Arrow/Right Arrow
         /// When tab has focus:
@@ -695,6 +708,9 @@ class PfePrimaryDetail extends PFElement {
         break;
 
       case "Home":
+        if (!this._isToggle(currentElement)) {
+          return;
+        }
         event.preventDefault(); // Prevent scrolling
         // Home
         //// When a tab has focus, moves focus to the first tab
@@ -703,19 +719,16 @@ class PfePrimaryDetail extends PFElement {
         break;
 
       case "End":
+        if (!this._isToggle(currentElement)) {
+          return;
+        }
         event.preventDefault(); // Prevent scrolling
         // End
         /// When a tab has focus, moves focus to the last tab
 
         newToggle = this._slots.detailsNav[this._slots.detailsNav.length - 1];
         break;
 
-      case "Escape":
-        // Only closing all at compact sizes since something should always be selected at non-compact
-        if (this.getAttribute("breakpoint") === "compact") {
-          this.closeAll();
-        }
-        break;
       default:
         return;
     }