Add polyfill for NodeList#forEach in IE11 to enable querySelectorAll …

…iteration

ui/index.js

@@ -16,11 +16,11 @@ if (!$('body').hasClass('educator-signed-in')) {
 // Make searchbar interactive, and grab any text the user already typed
 // in the placeholder <input />
 document.querySelectorAll('.NavbarSignedIn-StudentSearchbar').forEach(el => {
-  const initialText = document.querySelector('.NavbarSignedIn-StudentSearchbar-placeholder').value || '';
+  const placeholderEl = document.querySelector('.NavbarSignedIn-StudentSearchbar-placeholder');
+  const initialText = (placeholderEl && placeholderEl.value) || '';
   ReactDOM.render(<StudentSearchbar initialText={initialText} />, el);
 });
 
-
 // Routing
 // Some pages are server-rendered and have a different structure
 // other than #main so we ignore those.  Newer pages

ui/polyfills.js

@@ -24,6 +24,13 @@ import 'array.prototype.fill';
 import ArrayFindPolyfill from 'array.prototype.find';
 ArrayFindPolyfill.shim();
 
+// Polyfill NodeList#forEach for IE11, to
+// support document.querySelectorAll(selector).forEach.
+// see https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach
+if (window.NodeList && !NodeList.prototype.forEach) {
+  NodeList.prototype.forEach = Array.prototype.forEach;
+}
+
 // For React 16 in IE
 // see https://reactjs.org/docs/javascript-environment-requirements.html
 import 'core-js/es6/map';