IE11 support for commenting (#7057)

* Polyfill URLSearchParams

* Workaround unimplemented methods for IE11

* Add a fallback for the <details>/<summary> elements

client/src/components/CommentApp/components/CommentHeader/index.tsx

@@ -5,9 +5,46 @@ import React, { FunctionComponent, useState, useEffect, useRef } from 'react';
 import Icon from '../../../Icon/Icon';
 import type { Store } from '../../state';
 import { TranslatableStrings } from '../../main';
+import { IS_IE11 } from '../../../../config/wagtailConfig';
 
 import { Author } from '../../state/comments';
 
+// Details/Summary components that just become <details>/<summary> tags
+// except for IE11 where they become <div> tags to allow us to style them
+const Details: React.FunctionComponent<React.ComponentPropsWithoutRef<'details'>> = ({ children, open, ...extraProps }) => {
+  if (IS_IE11) {
+    return (
+      <div className={'details-fallback' + (open ? ' details-fallback--open' : '')} {...extraProps}>
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <details {...extraProps}>
+      {children}
+    </details>
+  );
+};
+
+const Summary: React.FunctionComponent<React.ComponentPropsWithoutRef<'summary'>> = ({ children, ...extraProps }) => {
+  if (IS_IE11) {
+    return (
+      <button
+        className="details-fallback__summary"
+        {...extraProps}
+      >
+        {children}
+      </button>
+    );
+  }
+
+  return (
+    <summary {...extraProps}>
+      {children}
+    </summary>
+  );
+};
 
 interface CommentReply {
   author: Author | null;
@@ -84,8 +121,8 @@ export const CommentHeader: FunctionComponent<CommentHeaderProps> = ({
         }
         {(onEdit || onDelete) &&
           <div className="comment-header__action comment-header__action--more">
-            <details open={menuOpen} onClick={toggleMenu}>
-              <summary
+            <Details open={menuOpen} onClick={toggleMenu}>
+              <Summary
                 aria-label={strings.MORE_ACTIONS}
                 aria-haspopup="menu"
                 role="button"
@@ -93,13 +130,13 @@ export const CommentHeader: FunctionComponent<CommentHeaderProps> = ({
                 aria-expanded={menuOpen}
               >
                 <Icon name="ellipsis-v" />
-              </summary>
+              </Summary>
 
               <div className="comment-header__more-actions" role="menu" ref={menuRef}>
                 {onEdit && <button type="button" role="menuitem" onClick={onClickEdit}>{strings.EDIT}</button>}
                 {onDelete && <button type="button" role="menuitem" onClick={onClickDelete}>{strings.DELETE}</button>}
               </div>
-            </details>
+            </Details>
           </div>
         }
       </div>

client/src/components/CommentApp/components/CommentHeader/style.scss

@@ -38,7 +38,8 @@
         }
 
         > button,
-        > details > summary {
+        > details > summary,
+        .details-fallback > .details-fallback__summary {  // IE11 uses divs instead with these classes
             // Hides triangle on Firefox
             list-style-type: none;
             // Hides triangle on Chrome
@@ -65,7 +66,8 @@
             }
         }
 
-        > details {
+        > details,
+        > .details-fallback {  // IE11 uses divs instead with these classes
             position: relative;
 
             > div {
@@ -77,14 +79,16 @@
 
         &--resolve {
             > button,
-            > details > summary {
+            > details > summary,
+            > .details-fallback > .details-fallback__summary {  // IE11 uses divs instead with these classes
                 color: $color-teal;
             }
         }
 
         &--more {
             > button,
-            > details > summary {
+            > details > summary,
+            > .details-fallback > .details-fallback__summary {  // IE11 uses divs instead with these classes
                 color: $color-grey-25;
             }
         }
@@ -112,8 +116,8 @@
 
         button {
             display: block;
-            background: unset;
-            border: unset;
+            background: none;
+            border: 0;
             color: #fff;
             padding: 5px 10px;
             font-size: 13px;
@@ -132,3 +136,12 @@
 .comment-reply--mode-deleting .comment-header {
     opacity: 0.5;
 }
+
+// IE11 only uses these classes
+.details-fallback .comment-header__more-actions {
+    display: none;
+}
+
+.details-fallback--open .comment-header__more-actions {
+    display: block;
+}

client/src/entrypoints/admin/comments.js

@@ -95,7 +95,12 @@ window.comments = (() => {
       this.setOnClickHandler(localId);
     }
     onDelete() {
-      this.node.remove();
+      // IE11
+      if (!this.node.remove) {
+        this.node.parentNode.removeChild(this.node);
+      } else {
+        this.node.remove();
+      }
       if (this.unsubscribe) {
         this.unsubscribe();
       }
@@ -257,7 +262,7 @@ window.comments = (() => {
       commentsElement, commentsOutputElement, data.user, data.comments, new Map(Object.entries(data.authors)), STRINGS
     );
 
-    formElement.querySelectorAll('[data-component="add-comment-button"]').forEach(initAddCommentButton);
+    Array.from(formElement.querySelectorAll('[data-component="add-comment-button"]')).forEach(initAddCommentButton);
 
     // Attach the commenting app to the tab navigation, if it exists
     const tabNavElement = formElement.querySelector('[data-tab-nav]');

client/src/utils/polyfills.js

@@ -10,3 +10,5 @@ import 'whatwg-fetch';
 import 'element-closest';
 // IE11
 import 'formdata-polyfill';
+// IE11
+import 'url-search-params-polyfill';

package-lock.json

@@ -15611,6 +15611,11 @@
         }
       }
     },
+    "url-search-params-polyfill": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/url-search-params-polyfill/-/url-search-params-polyfill-8.1.1.tgz",
+      "integrity": "sha512-KmkCs6SjE6t4ihrfW9JelAPQIIIFbJweaaSLTh/4AO+c58JlDcb+GbdPt8yr5lRcFg4rPswRFRRhBGpWwh0K/Q=="
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",

package.json

@@ -107,6 +107,7 @@
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
     "telepath-unpack": "^0.0.3",
+    "url-search-params-polyfill": "^8.1.1",
     "uuid": "^8.3.2",
     "whatwg-fetch": "^2.0.3"
   },