fix: DEV-3730: Make shortcut buttons work without focusing textarea (#1127)

Author: Gondragos

e2e/fragments/AtOutliner.js

@@ -0,0 +1,31 @@
+/* global inject, locate */
+const { I } = inject();
+
+module.exports = {
+  _rootSelector: '.lsf-outliner',
+  _regionListSelector: '.lsf-outliner-tree',
+  _regionListItemSelector: '.lsf-tree__node',
+  _regionListItemIndex: '.lsf-outliner-item__index',
+  locateOutliner() {
+    return locate(this._rootSelector);
+  },
+  locate(locator) {
+    return locator ? locate(locator).inside(this.locateOutliner()) : this.locateOutliner();
+  },
+  locateRegionList() {
+    return this.locate(this._regionListSelector);
+  },
+  locateRegionItemList() {
+    return locate(this._regionListItemSelector).inside(this.locateRegionList());
+  },
+  locateRegionItemIndex(idx) {
+    return locate(this._regionListItemIndex).withText(`${idx}`).inside(this.locateRegionItemList());
+  },
+  seeRegions(count) {
+    count && I.seeElement(this.locateRegionItemList().at(count));
+    I.dontSeeElement(this.locateRegionItemList().at(count + 1));
+  },
+  clickRegion(idx) {
+    I.click(this.locateRegionItemIndex(idx));
+  },
+};

e2e/tests/shortcuts.test.js

@@ -200,3 +200,102 @@ Data(configParams).Scenario('Should work with existent regions.', async ({ I, La
   AtSidebar.see('-A + B!');
 });
 
+{
+  const paramsTable = new DataTable(['isInline', 'isPerRegion']);
+
+  for (const isPerRegion of [true, false]) {
+    for (const isInline of [true, false]) {
+      paramsTable.add([isInline, isPerRegion]);
+    }
+  }
+
+  const createConfig = ({ rows = '1' }) => {
+    return `<View>
+  <Text name="text" value="$text" />
+  <TextArea name="comment" toName="text" editable="true" rows="${rows}">
+    <Shortcut value="Shortcut" hotkey="Alt+V" />
+  </TextArea>
+</View>
+`;
+  };
+  const createPerRegionConfig = ({ rows = '1' }) => {
+    return `<View>
+  <Labels name="label" toName="text">
+    <Label value="region" />
+  </Labels>
+  <Text name="text" value="$text" />
+  <TextArea name="comment" toName="text" editable="true" rows="${rows}">
+    <Shortcut value="Shortcut" hotkey="Alt+V" />
+  </TextArea>
+</View>
+`;
+  };
+
+  Data(paramsTable).Scenario('Initial focus', async ({ I, LabelStudio, AtOutliner, current }) => {
+    const { isInline, isPerRegion } = current;
+    const config = (isPerRegion ? createPerRegionConfig : createConfig)({
+      rows: isInline ? '1' : '3',
+    });
+
+    I.amOnPage('/');
+    LabelStudio.setFeatureFlags({
+      ff_front_dev_1564_dev_1565_shortcuts_focus_and_cursor_010222_short: true,
+      ff_front_dev_1566_shortcuts_in_results_010222_short: true,
+      ff_front_1170_outliner_030222_short: true,
+      fflag_fix_front_dev_3730_shortcuts_initial_input_22122022_short: true,
+    });
+
+    LabelStudio.init({
+      config,
+      data: { text: 'A simple text' },
+      annotations: [{
+        id: 'Test',
+        result: isPerRegion ? [
+          {
+            'value': {
+              'start': 9,
+              'end': 13,
+              'text': 'text',
+              'labels': [
+                'region',
+              ],
+            },
+            'id': 'Yk0XNP_zRJ',
+            'from_name': 'label',
+            'to_name': 'text',
+            'type': 'labels',
+            'origin': 'manual',
+          },
+        ] : [],
+      }],
+    });
+
+    if (isPerRegion) {
+      I.say('Select region');
+      AtOutliner.clickRegion(1);
+    }
+    I.say('Try to use shortcut at the start');
+    I.click(locate('.ant-tag').withText('Shortcut'));
+    // eslint-disable-next-line
+    // pause();
+
+    I.waitForValue('[name="comment"]', 'Shortcut');
+
+    I.say('Commit text');
+    I.pressKey(['Shift', 'Enter']);
+
+    I.say('Check that shortcuts still work in the edit mode');
+    I.click('[aria-label="edit"]');
+    I.click(locate('.ant-tag').withText('Shortcut'));
+    I.waitForValue('[name^="comment:"]', 'ShortcutShortcut');
+
+    I.say('Commit changes');
+    I.pressKey(['Shift', 'Enter']);
+
+    I.say('Check that shortcuts work with textarea again');
+    I.click(locate('.ant-tag').withText('Shortcut'));
+    I.waitForValue('[name="comment"]', 'Shortcut');
+
+  });
+}
+

src/tags/control/TextArea/TextArea.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { createRef, forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
 import { Button, Form, Input } from 'antd';
 import { observer } from 'mobx-react';
 import { destroy, isAlive, types } from 'mobx-state-tree';
@@ -18,7 +18,7 @@ import styles from '../../../components/HtxTextBox/HtxTextBox.module.scss';
 import { Block, Elem } from '../../../utils/bem';
 import './TextArea.styl';
 import { IconTrash } from '../../../assets/icons';
-import { FF_DEV_1564_DEV_1565, isFF } from '../../../utils/feature-flags';
+import { FF_DEV_1564_DEV_1565, FF_DEV_3730, isFF } from '../../../utils/feature-flags';
 
 const { TextArea } = Input;
 
@@ -82,6 +82,7 @@ const Model = types.model({
 }).volatile(() => {
   return {
     focusable: true,
+    textareaRef: createRef(),
   };
 }).views(self => ({
   get isEditable() {
@@ -137,6 +138,14 @@ const Model = types.model({
   let lastActiveElement = null;
   let lastActiveElementModel = null;
 
+  const isAvailableElement = (element, elementModel) => {
+    if (!element || !elementModel || !isAlive(elementModel)) return false;
+    // Not available if active element is disappeared
+    if (self === elementModel && !self.showSubmit) return false;
+    if (!element.parentElement) return false;
+    return true;
+  };
+
   return {
     getSerializableValue() {
       const texts = self.regions.map(s => s._value);
@@ -232,11 +241,21 @@ const Model = types.model({
 
     onShortcut(value) {
       if (isFF(FF_DEV_1564_DEV_1565)) {
-        if (!lastActiveElement || !lastActiveElementModel || !isAlive(lastActiveElementModel)) return;
-        // Do nothing if active element is disappeared
-        if (self === lastActiveElementModel && !self.showSubmit) return;
-        if (!lastActiveElement.parentElement) return;
-
+        if (!isAvailableElement(lastActiveElement, lastActiveElementModel)) {
+          if (isFF(FF_DEV_3730)) {
+          // Try to use main textarea element
+            const textareaElement = self.textareaRef.current?.input || self.textareaRef.current?.resizableTextArea?.textArea;
+          
+            if (isAvailableElement(textareaElement, self)) {
+              lastActiveElement = textareaElement;
+              lastActiveElementModel = self;
+            } else {
+              return;
+            }
+          } else {
+            return;
+          }
+        }
         lastActiveElement.setRangeText(value, lastActiveElement.selectionStart, lastActiveElement.selectionEnd, 'end');
         lastActiveElementModel.setValue(lastActiveElement.value);
       } else {
@@ -313,6 +332,7 @@ const HtxTextArea = observer(({ item }) => {
       item.setValue(value);
     },
     onFocus,
+    ref: item.textareaRef,
   };
 
   if (rows > 1) {

src/utils/feature-flags.ts

@@ -130,6 +130,12 @@ export const FF_DEV_3617 = 'fflag_fix_front_dev_3617_taxonomy_memory_leaks_fix';
  */
 export const FF_DEV_1284 = 'fflag_fix_front_dev_1284_auto_detect_undo_281022_short';
 
+/**
+ * Allow shourtcuts button to work with visible main textarea when there is no focus
+ * @link https://app.launchdarkly.com/default/production/features/fflag_fix_front_dev_3730_shortcuts_initial_input_22122022_short
+ */
+export const FF_DEV_3730 = 'fflag_fix_front_dev_3730_shortcuts_initial_input_22122022_short';
+
 function getFeatureFlags() {
   return {
     ...(window.APP_SETTINGS?.feature_flags ?? {}),