fix: remove outer focus container from visual editor (#2997)

* remove outer focus container from visual editor * fix lint error Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>
microsoft · May 11, 2020 · b9b1b62 · b9b1b62
1 parent 3ac5786
commit b9b1b62
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 37 deletions.
diff --git a/Composer/packages/client/src/pages/design/index.tsx b/Composer/packages/client/src/pages/design/index.tsx
@@ -3,7 +3,7 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React, { Suspense, useContext, useEffect, useMemo, useState, useRef } from 'react';
+import React, { Suspense, useContext, useEffect, useMemo, useState } from 'react';
 import { Breadcrumb, IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcrumb';
 import formatMessage from 'format-message';
 import { globalHistory, RouteComponentProps } from '@reach/router';
@@ -85,7 +85,6 @@ const getTabFromFragment = () => {
 
 const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: string }>> = props => {
   const { state, actions } = useContext(StoreContext);
-  const visualPanelRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
   const { dialogs, displaySkillManifest, breadcrumb, visualEditorSelection, projectId, schemas, focusPath } = state;
   const {
     dismissManifestModal,
@@ -183,9 +182,6 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     } else {
       navTo(id);
     }
-    if (visualPanelRef.current) {
-      visualPanelRef.current.focus();
-    }
   }
 
   const onCreateDialogComplete = newDialog => {
@@ -419,7 +415,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
           />
           <Conversation css={editorContainer}>
             <div css={editorWrapper}>
-              <div css={visualPanel} ref={visualPanelRef} tabIndex={0}>
+              <div css={visualPanel}>
                 {breadcrumbItems}
                 {dialogJsonVisible ? (
                   <JsonEditor

diff --git a/Composer/packages/client/src/pages/design/styles.ts b/Composer/packages/client/src/pages/design/styles.ts
@@ -80,12 +80,6 @@ export const visualPanel = css`
   flex-direction: column;
   flex: 1;
   border-right: 1px solid #c4c4c4;
-  position: relative;
-
-  &:focus {
-    border: black solid 1px;
-    outline: none;
-  }
 
   label: DesignPageVisualPanel;
 `;

diff --git a/Composer/packages/extensions/visual-designer/src/components/lib/KeyboardZone.tsx b/Composer/packages/extensions/visual-designer/src/components/lib/KeyboardZone.tsx
@@ -3,25 +3,16 @@
 
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
-import { FC } from 'react';
+import React from 'react';
 
 import { mapShortcutToKeyboardCommand } from '../../constants/KeyboardCommandTypes';
 
 const styles = css`
-  position: relative;
+  border: 1px solid transparent;
 
   &:focus {
     outline: none;
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      border: 1px solid black;
-    }
+    border-color: black;
   }
 `;
 
@@ -36,6 +27,7 @@ const overriddenKeyCodes = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
 
 interface KeyboardZoneProps {
   onCommand: (action, e: KeyboardEvent) => object | void;
+  children: React.ReactChild;
 }
 
 const isMac = () => {
@@ -52,7 +44,7 @@ const buildModifierKeyPrefix = (e: KeyboardEvent): string => {
   return prefix;
 };
 
-export const KeyboardZone: FC<KeyboardZoneProps> = ({ onCommand, children }): JSX.Element => {
+export const KeyboardZone = React.forwardRef<HTMLDivElement, KeyboardZoneProps>(({ onCommand, children }, ref) => {
   const handleKeyDown = e => {
     if (overriddenKeyCodes.includes(e.key)) {
       e.preventDefault();
@@ -65,8 +57,8 @@ export const KeyboardZone: FC<KeyboardZoneProps> = ({ onCommand, children }): JS
   };
 
   return (
-    <div onKeyDown={handleKeyDown} tabIndex={0} data-test-id="keyboard-zone" css={styles}>
+    <div onKeyDown={handleKeyDown} tabIndex={0} data-test-id="keyboard-zone" css={styles} ref={ref}>
       {children}
     </div>
   );
-};
+});
diff --git a/Composer/packages/extensions/visual-designer/src/editors/ObiEditor.tsx b/Composer/packages/extensions/visual-designer/src/editors/ObiEditor.tsx
@@ -38,8 +38,6 @@ export const ObiEditor: FC<ObiEditorProps> = ({
   redo,
   announce,
 }): JSX.Element | null => {
-  let divRef;
-
   const { focusedId, focusedEvent, clipboardActions, dialogFactory } = useContext(NodeRendererContext);
   const { shellApi } = useShellApi();
   const {
@@ -54,6 +52,12 @@ export const ObiEditor: FC<ObiEditorProps> = ({
   } = useDialogEditApi(shellApi);
   const { createDialog, readDialog, updateDialog } = useDialogApi(shellApi);
   const { actionsContainLuIntent } = useActionApi(shellApi);
+  const divRef = useRef<HTMLDivElement>(null);
+
+  // send focus to the keyboard area when navigating to a new trigger
+  useEffect(() => {
+    divRef.current?.focus();
+  }, [focusedEvent]);
 
   const trackActionChange = (actionPath: string) => {
     const affectedPaths = DialogUtils.getParentPaths(actionPath);
@@ -363,20 +367,17 @@ export const ObiEditor: FC<ObiEditorProps> = ({
   if (!data) return renderFallbackContent();
   return (
     <SelectionContext.Provider value={selectionContext}>
-      <KeyboardZone onCommand={handleKeyboardCommand}>
+      <KeyboardZone onCommand={handleKeyboardCommand} ref={divRef}>
         <MarqueeSelection selection={selection} css={{ width: '100%', height: '100%' }}>
           <div
-            tabIndex={0}
             className="obi-editor-container"
             data-testid="obi-editor-container"
             css={{
               width: '100%',
               height: '100%',
               padding: '48px 20px',
               boxSizing: 'border-box',
-              '&:focus': { outline: 'none' },
             }}
-            ref={el => (divRef = el)}
             onClick={e => {
               e.stopPropagation();
               dispatchEvent(NodeEventTypes.Focus, { id: '' });
@@ -386,7 +387,7 @@ export const ObiEditor: FC<ObiEditorProps> = ({
               id={path}
               data={data}
               onEvent={(eventName, eventData) => {
-                divRef.focus({ preventScroll: true });
+                divRef.current?.focus({ preventScroll: true });
                 dispatchEvent(eventName, eventData);
               }}
             />
@@ -402,7 +403,6 @@ ObiEditor.defaultProps = {
   data: {},
   focusedSteps: [],
   onFocusSteps: () => {},
-  focusedEvent: '',
   onFocusEvent: () => {},
   onClipboardChange: () => {},
   onOpen: () => {},
@@ -419,7 +419,6 @@ interface ObiEditorProps {
   data: any;
   focusedSteps: string[];
   onFocusSteps: (stepIds: string[], fragment?: string) => any;
-  focusedEvent: string;
   onFocusEvent: (eventId: string) => any;
   onClipboardChange: (actions: any[]) => void;
   onCreateDialog: (actions: any[]) => Promise<string | null>;

diff --git a/Composer/packages/extensions/visual-designer/src/index.tsx b/Composer/packages/extensions/visual-designer/src/index.tsx
@@ -126,7 +126,6 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({ schema }): JSX.Element
                 data={data}
                 focusedSteps={focusedActions}
                 onFocusSteps={onFocusSteps}
-                focusedEvent={focusedEvent}
                 onFocusEvent={onFocusEvent}
                 onClipboardChange={onCopy}
                 onCreateDialog={createDialog}