fix: LEAP-878: Fix shrinking textarea on edit

web/dist/apps/labelstudio/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "Merge branch 'develop' into 'fb-HUMSIG-37-visuals'",
-  "commit": "309851f803a1995c36b11f416f80cff709b6be2f",
-  "date": "2024-04-04T16:34:09.000Z",
-  "branch": "fb-HUMSIG-37-visuals"
+  "message": "Merge branch 'develop' into 'fb-leap-878/textarea-height'",
+  "commit": "2e2ecfe86d4c4ce6fa9c4f3802594654bb9907b2",
+  "date": "2024-04-05T15:43:42.000Z",
+  "branch": "fb-leap-878/textarea-height"
 }

web/dist/libs/datamanager/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "Merge branch 'develop' into 'fb-HUMSIG-37-visuals'",
-  "commit": "309851f803a1995c36b11f416f80cff709b6be2f",
-  "date": "2024-04-04T16:34:09.000Z",
-  "branch": "fb-HUMSIG-37-visuals"
+  "message": "Merge branch 'develop' into 'fb-leap-878/textarea-height'",
+  "commit": "2e2ecfe86d4c4ce6fa9c4f3802594654bb9907b2",
+  "date": "2024-04-05T15:43:42.000Z",
+  "branch": "fb-leap-878/textarea-height"
 }

web/dist/libs/editor/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "Merge branch 'develop' into 'fb-HUMSIG-37-visuals'",
-  "commit": "309851f803a1995c36b11f416f80cff709b6be2f",
-  "date": "2024-04-04T16:34:09.000Z",
-  "branch": "fb-HUMSIG-37-visuals"
+  "message": "Merge branch 'develop' into 'fb-leap-878/textarea-height'",
+  "commit": "2e2ecfe86d4c4ce6fa9c4f3802594654bb9907b2",
+  "date": "2024-04-05T15:43:42.000Z",
+  "branch": "fb-leap-878/textarea-height"
 }

web/libs/editor/src/components/HtxTextBox/HtxTextBox.js

@@ -6,6 +6,8 @@ import throttle from 'lodash.throttle';
 import { FF_DEV_1566, isFF } from '../../utils/feature-flags';
 
 const { Paragraph } = Typography;
+// used for correct auto-height calculation
+const BORDER_WIDTH = 1;
 
 export class HtxTextBox extends React.Component {
   state = {
@@ -85,9 +87,12 @@ export class HtxTextBox extends React.Component {
   };
 
   updateHeight = throttle(() => {
-    const height = this.inputRef.current?.scrollHeight || 0;
+    // very important to add borders to the height, otherwise input will be shrinking on every recalc
+    const scrollHeight = this.inputRef.current?.scrollHeight ?? 0;
+    const height = scrollHeight + BORDER_WIDTH * 2;
 
-    if (height && height !== this.state.height) {
+    // initially scrollHeight can be 0, so we won't change height
+    if (scrollHeight && height !== this.state.height) {
       this.setState({ height });
     }
   }, 100);
@@ -114,7 +119,7 @@ export class HtxTextBox extends React.Component {
     const inputProps = {
       name,
       className: 'ant-input ' + styles.input,
-      style: height ? { height } : null,
+      style: height ? { height, borderWidth: BORDER_WIDTH } : null,
       autoFocus: true,
       ref: this.inputRef,
       value,

web/libs/editor/src/components/HtxTextBox/HtxTextBox.module.scss

@@ -1,6 +1,7 @@
 .input {
   width: 100%;
   padding: 0.4em 1em;
+  border-width: 1px;
   display: block;
 }
 
@@ -15,7 +16,8 @@
 
 .delete {
   color: #1890ff;
-  padding-top: 0.5em;
+  // Typography.Paragraph has margin-bottom: 1em, so we have to compensate it to have icon in the middle
+  margin-top: -1em;
   padding-left: 1em;
   line-height: 1.8em;
 }