From a4b6dd194e55ce502f8dfa1287ef3769d2d1f884 Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Wed, 19 Oct 2016 13:03:19 -0400
Subject: [PATCH] fix dropdown bug on safari

---
 client/modules/IDE/components/Editor.js       | 11 ++++++-----
 client/modules/IDE/components/FileNode.js     |  6 ++++--
 client/modules/IDE/components/PreviewFrame.js |  2 +-
 client/modules/IDE/components/Sidebar.js      |  6 ++++--
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js
index 424acfdf..9bb18486 100644
--- a/client/modules/IDE/components/Editor.js
+++ b/client/modules/IDE/components/Editor.js
@@ -103,11 +103,11 @@ class Editor extends React.Component {
       this._cm.setOption('indentWithTabs', this.props.isTabIndent);
     }
     if (this.props.file.name !== prevProps.name) {
-      if (this.props.file.name.match(/.+\.js$/)) {
+      if (this.props.file.name.match(/.+\.js$/i)) {
         this._cm.setOption('mode', 'javascript');
-      } else if (this.props.file.name.match(/.+\.css$/)) {
+      } else if (this.props.file.name.match(/.+\.css$/i)) {
         this._cm.setOption('mode', 'css');
-      } else if (this.props.file.name.match(/.+\.html$/)) {
+      } else if (this.props.file.name.match(/.+\.html$/i)) {
         this._cm.setOption('mode', 'htmlmixed');
       }
     }
@@ -155,8 +155,9 @@ class Editor extends React.Component {
           className="editor__options-button"
           aria-label="editor options"
           tabIndex="0"
-          onClick={(e) => {
-            e.target.focus();
+          ref="optionsButton"
+          onClick={() => {
+            this.refs.optionsButton.focus();
             this.props.showEditorOptions();
           }}
           onBlur={() => setTimeout(this.props.closeEditorOptions, 200)}
diff --git a/client/modules/IDE/components/FileNode.js b/client/modules/IDE/components/FileNode.js
index b2d7c1f2..b295e98c 100644
--- a/client/modules/IDE/components/FileNode.js
+++ b/client/modules/IDE/components/FileNode.js
@@ -117,8 +117,10 @@ export class FileNode extends React.Component {
                 <button
                   className="sidebar__file-item-show-options"
                   aria-label="view file options"
-                  onClick={(e) => {
-                    e.target.focus();
+                  ref={`fileOptions-${this.props.id}`}
+                  tabIndex="0"
+                  onClick={() => {
+                    this.refs[`fileOptions-${this.props.id}`].focus();
                     this.props.showFileOptions(this.props.id);
                   }}
                 >
diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js
index ce65e5aa..3c2ec073 100644
--- a/client/modules/IDE/components/PreviewFrame.js
+++ b/client/modules/IDE/components/PreviewFrame.js
@@ -256,7 +256,7 @@ class PreviewFrame extends React.Component {
         frameBorder="0"
         ref="iframe"
         title="sketch output"
-        sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"
+        sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-forms"
       />
     );
   }
diff --git a/client/modules/IDE/components/Sidebar.js b/client/modules/IDE/components/Sidebar.js
index b35f7c0e..b5bc469c 100644
--- a/client/modules/IDE/components/Sidebar.js
+++ b/client/modules/IDE/components/Sidebar.js
@@ -38,8 +38,10 @@ class Sidebar extends React.Component {
             <button
               aria-label="add file or folder"
               className="sidebar__add"
-              onClick={(e) => {
-                e.target.focus();
+              tabIndex="0"
+              ref="sidebarOptions"
+              onClick={() => {
+                this.refs.sidebarOptions.focus();
                 this.props.openProjectOptions();
               }}
               onBlur={() => setTimeout(this.props.closeProjectOptions, 200)}