Apply `dir="auto"` fix in Edge Legacy

The sidebar app failed to start in Edge Legacy due to `element.dir
= "auto` assignments causing an exception during Preact component
rendering. We already had a fix for this that applied to IE 11, so the
fix for this problem is to change the check to test for the bug
specifically rather than testing the user agent.

src/shared/renderer-options.js

 import { options } from 'preact';
 
-import { isIE11 } from './user-agent';
-
 /**
- * Force the dir="auto" attribute to be dir="" as this otherwise causes
- * an exception in IE11 and breaks subsequent rendering.
+ * Setup workarounds for setting certain HTML element properties or attributes
+ * in some browsers.
  *
  * @param {Object} _options - Test seam
  */
-export function setupIE11Fixes(_options = options) {
-  if (isIE11()) {
+export function setupBrowserFixes(_options = options) {
+  let needsDirAutoFix = false;
+
+  try {
+    const el = document.createElement('div');
+    // The value "auto" causes an exception in IE 11 and Edge Legacy.
+    el.dir = 'auto';
+  } catch (err) {
+    needsDirAutoFix = true;
+  }
+
+  if (needsDirAutoFix) {
     const prevHook = _options.vnode;
     _options.vnode = vnode => {
       if (typeof vnode.type === 'string') {

src/shared/test/renderer-options-test.js

 import { createElement } from 'preact';
 
-import { setupIE11Fixes } from '../renderer-options';
-import { $imports } from '../renderer-options';
+import { setupBrowserFixes } from '../renderer-options';
 
 describe('shared/renderer-options', () => {
-  let fakeIsIE11;
-
-  beforeEach(() => {
-    fakeIsIE11 = sinon.stub().returns(true);
-    $imports.$mock({
-      './user-agent': {
-        isIE11: fakeIsIE11,
-      },
-    });
-  });
-
-  afterEach(() => {
-    $imports.$restore();
-  });
-
-  describe('setupIE11Fixes', () => {
+  describe('setupBrowserFixes', () => {
     let fakeOptions;
     let prevHook;
 
@@ -30,36 +14,50 @@ describe('shared/renderer-options', () => {
       };
     });
 
-    context('when isIE11 is false', () => {
-      it('does not set a new vnode option if isIE11 is false', () => {
-        fakeIsIE11.returns(false);
-        setupIE11Fixes(fakeOptions);
+    context('when all checks pass', () => {
+      it('does not set a new vnode option', () => {
+        setupBrowserFixes(fakeOptions);
         assert.isNotOk(fakeOptions.vnode);
       });
     });
 
-    context('when isIE11 is true', () => {
+    context('when `dir = "auto"` check fails', () => {
+      beforeEach(() => {
+        const fakeElement = {
+          set dir(value) {
+            if (value === 'auto') {
+              throw new Error('Invalid argument');
+            }
+          },
+        };
+        sinon.stub(document, 'createElement').returns(fakeElement);
+      });
+
+      afterEach(() => {
+        document.createElement.restore();
+      });
+
       it('sets a new vnode option', () => {
-        setupIE11Fixes(fakeOptions);
+        setupBrowserFixes(fakeOptions);
         assert.isOk(fakeOptions.vnode);
       });
 
       it('does not override an existing option if one exists', () => {
         fakeOptions.vnode = prevHook;
-        setupIE11Fixes(fakeOptions);
+        setupBrowserFixes(fakeOptions);
         fakeOptions.vnode({});
         assert.called(prevHook);
       });
 
       it("alters the `dir` attribute when its equal to 'auto'", () => {
-        setupIE11Fixes(fakeOptions);
+        setupBrowserFixes(fakeOptions);
         const vDiv = createElement('div', { dir: 'auto' }, 'text');
         fakeOptions.vnode(vDiv);
         assert.equal(vDiv.props.dir, '');
       });
 
       it('does not alter the `dir` attribute when vnode.type is not a string', () => {
-        setupIE11Fixes(fakeOptions);
+        setupBrowserFixes(fakeOptions);
         const vDiv = createElement('div', { dir: 'auto' }, 'text');
         vDiv.type = () => {}; // force it to be a function
         fakeOptions.vnode(vDiv);
@@ -67,7 +65,7 @@ describe('shared/renderer-options', () => {
       });
 
       it("does not alter the `dir` attribute when its value is not 'auto'", () => {
-        setupIE11Fixes(fakeOptions);
+        setupBrowserFixes(fakeOptions);
         const vDiv = createElement('function', { dir: 'ltr' }, 'text');
         fakeOptions.vnode(vDiv);
         assert.equal(vDiv.props.dir, 'ltr');

src/sidebar/index.js

@@ -43,8 +43,8 @@ const isSidebar = !(
   window.location.pathname.startsWith('/a/')
 );
 
-// Install Preact renderer options to work around IE11 quirks
-rendererOptions.setupIE11Fixes();
+// Install Preact renderer options to work around browser quirks
+rendererOptions.setupBrowserFixes();
 
 // @ngInject
 function setupApi(api, streamer) {