Fixed layer selection by reverting focus to canvas (#1188)

Author: Morten Barklund

assets/src/edit-story/components/panels/layer/layerList.js

@@ -18,7 +18,7 @@
  * External dependencies
  */
 import styled from 'styled-components';
-import { Fragment } from 'react';
+import { Fragment, useCallback } from 'react';
 import PropTypes from 'prop-types';
 
 /**
@@ -30,6 +30,7 @@ import {
   ReorderableItem,
 } from '../../reorderable';
 import { useStory } from '../../../app';
+import useFocusCanvas from '../../canvas/useFocusCanvas';
 import { LAYER_HEIGHT } from './constants';
 import Layer from './layer';
 
@@ -55,6 +56,15 @@ function LayerPanel({ layers }) {
 
   const numLayers = layers && layers.length;
 
+  const focusCanvas = useFocusCanvas();
+  const handleStartReordering = useCallback(
+    (id) => () => {
+      setSelectedElementsById({ elementIds: [id] });
+      focusCanvas();
+    },
+    [setSelectedElementsById, focusCanvas]
+  );
+
   if (!numLayers) {
     return null;
   }
@@ -75,9 +85,7 @@ function LayerPanel({ layers }) {
           <LayerSeparator position={layer.position + 1} />
           <ReorderableItem
             position={layer.position}
-            onStartReordering={() =>
-              setSelectedElementsById({ elementIds: [layer.id] })
-            }
+            onStartReordering={handleStartReordering(layer.id)}
             disabled={layer.type === 'background'}
           >
             <Layer layer={layer} />

assets/src/edit-story/components/panels/layer/useLayerSelection.js

@@ -23,6 +23,7 @@ import { useCallback } from 'react';
  * Internal dependencies
  */
 import { useStory } from '../../../app';
+import useFocusCanvas from '../../canvas/useFocusCanvas';
 
 function useLayerSelection(layer) {
   const { id: elementId } = layer;
@@ -32,6 +33,8 @@ function useLayerSelection(layer) {
     actions: { setSelectedElementsById, toggleElementInSelection },
   } = useStory();
 
+  const focusCanvas = useFocusCanvas();
+
   const isSelected = selectedElementIds.includes(elementId);
   const pageElementIds = currentPage.elements.map(({ id }) => id);
 
@@ -62,13 +65,17 @@ function useLayerSelection(layer) {
         // No special key pressed - just selected this layer and nothing else.
         setSelectedElementsById({ elementIds: [elementId] });
       }
+
+      // In any case, revert focus to selected element(s)
+      focusCanvas();
     },
     [
       pageElementIds,
       selectedElementIds,
       setSelectedElementsById,
       toggleElementInSelection,
       elementId,
+      focusCanvas,
     ]
   );