From 350e3b54fe4f45aaf9a8bb72e8e4d6f4ccba44f7 Mon Sep 17 00:00:00 2001
From: GermanVor <vorotnikov.german@yandex.ru>
Date: Thu, 18 Jul 2024 15:02:10 +0200
Subject: [PATCH 1/3] chore: textAreaControl rows logic

---
 .../controls/TextArea/TextArea.scss           |  8 +--
 .../controls/TextArea/TextAreaControl.tsx     | 52 ++++---------------
 src/components/controls/mixins.scss           | 31 +++++++++++
 3 files changed, 44 insertions(+), 47 deletions(-)

diff --git a/src/components/controls/TextArea/TextArea.scss b/src/components/controls/TextArea/TextArea.scss
index 72dc5a1ca7..9fea7b8fe9 100644
--- a/src/components/controls/TextArea/TextArea.scss
+++ b/src/components/controls/TextArea/TextArea.scss
@@ -95,7 +95,7 @@ $block: '.#{variables.$ns}text-area';
     &_size {
         &_s {
             #{$block}__control {
-                @include control-mixins.input-control(s);
+                @include control-mixins.input-control-min-height(s);
             }
 
             &#{$block}_has-clear #{$block}__control {
@@ -107,7 +107,7 @@ $block: '.#{variables.$ns}text-area';
 
         &_m {
             #{$block}__control {
-                @include control-mixins.input-control(m);
+                @include control-mixins.input-control-min-height(m);
             }
 
             &#{$block}_has-clear #{$block}__control {
@@ -119,7 +119,7 @@ $block: '.#{variables.$ns}text-area';
 
         &_l {
             #{$block}__control {
-                @include control-mixins.input-control(l);
+                @include control-mixins.input-control-min-height(l);
             }
 
             &#{$block}_has-clear #{$block}__control {
@@ -131,7 +131,7 @@ $block: '.#{variables.$ns}text-area';
 
         &_xl {
             #{$block}__control {
-                @include control-mixins.input-control(xl);
+                @include control-mixins.input-control-min-height(xl);
             }
 
             &#{$block}_has-clear #{$block}__control {
diff --git a/src/components/controls/TextArea/TextAreaControl.tsx b/src/components/controls/TextArea/TextAreaControl.tsx
index ad9bbfce6d..12d492f212 100644
--- a/src/components/controls/TextArea/TextAreaControl.tsx
+++ b/src/components/controls/TextArea/TextAreaControl.tsx
@@ -15,19 +15,6 @@ type Props = Omit<TextAreaProps, 'autoComplete' | 'onChange' | 'controlProps'> &
 
 const b = block('text-area');
 
-const calculateLinesByScrollHeight = (args: {
-    height: number;
-    paddingTop: number;
-    paddingBottom: number;
-    lineHeight: number;
-}) => {
-    const {height, lineHeight} = args;
-    const paddingTop = Number.isNaN(args.paddingTop) ? 0 : args.paddingTop;
-    const paddingBottom = Number.isNaN(args.paddingBottom) ? 0 : args.paddingBottom;
-
-    return (height - paddingTop - paddingBottom) / lineHeight;
-};
-
 export function TextAreaControl(props: Props) {
     const {
         name,
@@ -39,7 +26,6 @@ export function TextAreaControl(props: Props) {
         defaultValue,
         controlRef,
         controlProps,
-        size,
         rows,
         minRows = 1,
         maxRows,
@@ -54,38 +40,19 @@ export function TextAreaControl(props: Props) {
     } = props;
     const innerControlRef = React.useRef<HTMLTextAreaElement>(null);
     const handleRef = useForkRef(controlRef, innerControlRef);
-    const textareaRows = rows || minRows;
-    const innerValue = value || innerControlRef?.current?.value;
 
-    const resizeHeight = React.useCallback(() => {
-        const control = innerControlRef?.current;
+    const innerValue = value || innerControlRef?.current?.value;
 
-        if (control && !rows) {
-            const controlStyles = getComputedStyle(control);
-            const lineHeight = parseInt(controlStyles.getPropertyValue('line-height'), 10);
-            const paddingTop = parseInt(controlStyles.getPropertyValue('padding-top'), 10);
-            const paddingBottom = parseInt(controlStyles.getPropertyValue('padding-bottom'), 10);
-            const linesWithCarriageReturn = (innerValue?.match(/\n/g) || []).length + 1;
-            const linesByScrollHeight = calculateLinesByScrollHeight({
-                height: control.scrollHeight,
-                paddingTop,
-                paddingBottom,
-                lineHeight,
-            });
+    const realRows = React.useMemo(() => {
+        if (rows) return rows;
 
-            control.style.height = 'auto';
+        let currentRowsNumber = (innerValue?.match(/\n/g) || []).length + 1;
 
-            if (maxRows && maxRows < Math.max(linesByScrollHeight, linesWithCarriageReturn)) {
-                control.style.height = `${maxRows * lineHeight + 2 * paddingTop}px`;
-            } else if (linesWithCarriageReturn > 1 || linesByScrollHeight > 1) {
-                control.style.height = `${control.scrollHeight}px`;
-            }
-        }
-    }, [rows, maxRows, innerValue]);
+        if (minRows !== undefined && currentRowsNumber < minRows) currentRowsNumber = minRows;
+        if (maxRows !== undefined && currentRowsNumber > maxRows) currentRowsNumber = maxRows;
 
-    React.useEffect(() => {
-        resizeHeight();
-    }, [resizeHeight, size, value]);
+        return currentRowsNumber;
+    }, [rows, minRows, maxRows, innerValue]);
 
     return (
         <textarea
@@ -93,7 +60,6 @@ export function TextAreaControl(props: Props) {
             ref={handleRef}
             style={{
                 ...controlProps.style,
-                height: rows ? 'auto' : undefined,
             }}
             className={b('control', controlProps.className)}
             name={name}
@@ -102,7 +68,7 @@ export function TextAreaControl(props: Props) {
             placeholder={placeholder}
             value={value}
             defaultValue={defaultValue}
-            rows={textareaRows}
+            rows={realRows}
             autoFocus={autoFocus}
             autoComplete={autoComplete}
             onChange={onChange}
diff --git a/src/components/controls/mixins.scss b/src/components/controls/mixins.scss
index cf4f771fa5..37cb3f0115 100644
--- a/src/components/controls/mixins.scss
+++ b/src/components/controls/mixins.scss
@@ -32,3 +32,34 @@
         padding: 11px 12px;
     }
 }
+
+@mixin input-control-min-height($size) {
+    --_--input-control-border-width: var(
+        --g-text-input-border-width,
+        var(--g-text-area-border-width, #{control-variables.$border-width})
+    );
+    @if $size == 's' {
+        @include mixins.text-body-short;
+
+        min-height: calc(#{variables.$s-height} - var(--_--input-control-border-width) * 2);
+        padding: 3px 8px;
+    }
+    @if $size == 'm' {
+        @include mixins.text-body-short;
+
+        min-height: calc(#{variables.$m-height} - var(--_--input-control-border-width) * 2);
+        padding: 5px 8px;
+    }
+    @if $size == 'l' {
+        @include mixins.text-body-short;
+
+        min-height: calc(#{variables.$l-height} - var(--_--input-control-border-width) * 2);
+        padding: 9px 12px;
+    }
+    @if $size == 'xl' {
+        @include mixins.text-body-2;
+
+        min-height: calc(#{variables.$xl-height} - var(--_--input-control-border-width) * 2);
+        padding: 11px 12px;
+    }
+}

From 9086c1b49c711bfb1a60b4f2bb9a3b9e44246776 Mon Sep 17 00:00:00 2001
From: GermanVor <vorotnikov.german@yandex.ru>
Date: Mon, 12 Aug 2024 17:43:35 +0200
Subject: [PATCH 2/3] chore: calculate rows number depend on lineHeight

---
 .../controls/TextArea/TextAreaControl.tsx     | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/controls/TextArea/TextAreaControl.tsx b/src/components/controls/TextArea/TextAreaControl.tsx
index 12d492f212..adae386307 100644
--- a/src/components/controls/TextArea/TextAreaControl.tsx
+++ b/src/components/controls/TextArea/TextAreaControl.tsx
@@ -15,6 +15,16 @@ type Props = Omit<TextAreaProps, 'autoComplete' | 'onChange' | 'controlProps'> &
 
 const b = block('text-area');
 
+const getRowsNumber = (textArea: HTMLTextAreaElement) => {
+    const lineHeight = parseInt(getComputedStyle(textArea, null).lineHeight, 10);
+
+    return Math.floor(textArea.scrollHeight / lineHeight);
+};
+
+// by default this number is 2, but in our component is 1
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#rows
+const DEFAULT_TEXT_AREA_ROWS_NUMBER = 1;
+
 export function TextAreaControl(props: Props) {
     const {
         name,
@@ -43,15 +53,16 @@ export function TextAreaControl(props: Props) {
 
     const innerValue = value || innerControlRef?.current?.value;
 
-    const realRows = React.useMemo(() => {
-        if (rows) return rows;
+    React.useEffect(() => {
+        if (rows || !innerControlRef.current) return;
 
-        let currentRowsNumber = (innerValue?.match(/\n/g) || []).length + 1;
+        innerControlRef.current.setAttribute('rows', DEFAULT_TEXT_AREA_ROWS_NUMBER.toString());
+        let currentRowsNumber = getRowsNumber(innerControlRef.current);
 
         if (minRows !== undefined && currentRowsNumber < minRows) currentRowsNumber = minRows;
         if (maxRows !== undefined && currentRowsNumber > maxRows) currentRowsNumber = maxRows;
 
-        return currentRowsNumber;
+        innerControlRef.current.setAttribute('rows', currentRowsNumber.toString());
     }, [rows, minRows, maxRows, innerValue]);
 
     return (
@@ -67,8 +78,8 @@ export function TextAreaControl(props: Props) {
             tabIndex={tabIndex}
             placeholder={placeholder}
             value={value}
+            rows={rows || DEFAULT_TEXT_AREA_ROWS_NUMBER}
             defaultValue={defaultValue}
-            rows={realRows}
             autoFocus={autoFocus}
             autoComplete={autoComplete}
             onChange={onChange}

From f887139cfeeb13656c776dbed90675df4a721c38 Mon Sep 17 00:00:00 2001
From: GermanVor <vorotnikov.german@yandex.ru>
Date: Mon, 12 Aug 2024 17:58:08 +0200
Subject: [PATCH 3/3] chore: replace input-control by input-control-min-height

---
 .../controls/TextInput/TextInput.scss         |  8 ++---
 src/components/controls/mixins.scss           | 31 -------------------
 2 files changed, 4 insertions(+), 35 deletions(-)

diff --git a/src/components/controls/TextInput/TextInput.scss b/src/components/controls/TextInput/TextInput.scss
index 562a6d045a..52f00492e9 100644
--- a/src/components/controls/TextInput/TextInput.scss
+++ b/src/components/controls/TextInput/TextInput.scss
@@ -147,7 +147,7 @@ $block: '.#{variables.$ns}text-input';
     &_size {
         &_s {
             #{$block}__control {
-                @include control-mixins.input-control(s);
+                @include control-mixins.input-control-min-height(s);
             }
 
             #{$block}__label {
@@ -178,7 +178,7 @@ $block: '.#{variables.$ns}text-input';
 
         &_m {
             #{$block}__control {
-                @include control-mixins.input-control(m);
+                @include control-mixins.input-control-min-height(m);
             }
 
             #{$block}__label {
@@ -209,7 +209,7 @@ $block: '.#{variables.$ns}text-input';
 
         &_l {
             #{$block}__control {
-                @include control-mixins.input-control(l);
+                @include control-mixins.input-control-min-height(l);
             }
 
             #{$block}__label {
@@ -240,7 +240,7 @@ $block: '.#{variables.$ns}text-input';
 
         &_xl {
             #{$block}__control {
-                @include control-mixins.input-control(xl);
+                @include control-mixins.input-control-min-height(xl);
             }
 
             #{$block}__label {
diff --git a/src/components/controls/mixins.scss b/src/components/controls/mixins.scss
index 37cb3f0115..6170048cc7 100644
--- a/src/components/controls/mixins.scss
+++ b/src/components/controls/mixins.scss
@@ -2,37 +2,6 @@
 @use '../variables.scss';
 @use './variables.scss' as control-variables;
 
-@mixin input-control($size) {
-    --_--input-control-border-width: var(
-        --g-text-input-border-width,
-        var(--g-text-area-border-width, #{control-variables.$border-width})
-    );
-    @if $size == 's' {
-        @include mixins.text-body-short;
-
-        height: calc(#{variables.$s-height} - var(--_--input-control-border-width) * 2);
-        padding: 3px 8px;
-    }
-    @if $size == 'm' {
-        @include mixins.text-body-short;
-
-        height: calc(#{variables.$m-height} - var(--_--input-control-border-width) * 2);
-        padding: 5px 8px;
-    }
-    @if $size == 'l' {
-        @include mixins.text-body-short;
-
-        height: calc(#{variables.$l-height} - var(--_--input-control-border-width) * 2);
-        padding: 9px 12px;
-    }
-    @if $size == 'xl' {
-        @include mixins.text-body-2;
-
-        height: calc(#{variables.$xl-height} - var(--_--input-control-border-width) * 2);
-        padding: 11px 12px;
-    }
-}
-
 @mixin input-control-min-height($size) {
     --_--input-control-border-width: var(
         --g-text-input-border-width,