fix: focus state of sidetabs on button clicks (#913)

graphql · Dec 18, 2018 · 4c05a53 · 4c05a53
1 parent 562e1ef
commit 4c05a53
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/packages/graphql-playground-react/src/components/Playground/ExplorerTabs/SideTabs.tsx b/packages/graphql-playground-react/src/components/Playground/ExplorerTabs/SideTabs.tsx
@@ -98,7 +98,13 @@ class SideTabs extends React.Component<
     if (prevProps.activeTabIdx && !this.props.docs.activeTabIdx) {
       this.props.setDocsVisible(this.props.sessionId, false)
     }
-    return this.setWidth()
+    this.setWidth()
+    if (
+      this.props.docs.activeTabIdx !== prevProps.docs.activeTabIdx &&
+      this.refContentContainer
+    ) {
+      this.refContentContainer.focus()
+    }
   }
 
   componentDidMount() {
@@ -164,9 +170,6 @@ class SideTabs extends React.Component<
   }
 
   private handleTabClick = idx => () => {
-    if (!this.props.docs.docsOpen && this.refContentContainer) {
-      this.refContentContainer.focus()
-    }
     if (this.props.docs.activeTabIdx === idx) {
       this.props.setDocsVisible(this.props.sessionId, false)
       return this.setWidth()

diff --git a/packages/graphql-playground-react/src/components/Playground/SchemaExplorer/SDLEditor.tsx b/packages/graphql-playground-react/src/components/Playground/SchemaExplorer/SDLEditor.tsx
@@ -152,11 +152,11 @@ const Editor = styled.div`
   }
 `
 const OverflowShadow = styled.div`
-	position: fixed:
-	top: 0;
-	left: 0;
-	right: 0;
-	height: 1px;
-	box-shadow: 0px 1px 3px rgba(17, 17, 17, 0.1);
-	z-index: 1000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  box-shadow: 0px 1px 3px rgba(17, 17, 17, 0.1);
+  z-index: 1000;
 `