From 218c190d2ed6d9322be07990ea6f4a755c514f6a Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Fri, 15 Sep 2023 12:30:50 +0300
Subject: [PATCH] Profile settings fixes (#219)

---
 src/components/Views/Author/Author.tsx        |  8 +-
 .../GrowingTextarea/GrowingTextarea.tsx       | 76 +++++++++----------
 2 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx
index c459f4c7..8da07e6a 100644
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@@ -44,9 +44,9 @@ export const AuthorView = (props: Props) => {
   const [followers, setFollowers] = createSignal<Author[]>([])
   const [subscriptions, setSubscriptions] = createSignal<Array<Author | Topic>>([])
   const [bioWrapper, setBioWrapper] = createSignal<HTMLElement>()
-  const [bioContainer, setBioContainer] = createSignal<HTMLElement>()
   const [showExpandBioControl, setShowExpandBioControl] = createSignal(false)
 
+  const bioContainerRef: { current: HTMLDivElement } = { current: null }
   const fetchSubscriptions = async (): Promise<{ authors: Author[]; topics: Topic[] }> => {
     try {
       const [getAuthors, getTopics] = await Promise.all([
@@ -63,8 +63,8 @@ export const AuthorView = (props: Props) => {
   }
 
   const checkBioHeight = () => {
-    if (bioContainer()) {
-      setShowExpandBioControl(bioContainer().offsetHeight > bioWrapper().offsetHeight)
+    if (bioContainerRef.current) {
+      setShowExpandBioControl(bioContainerRef.current.offsetHeight > bioWrapper().offsetHeight)
     }
   }
 
@@ -184,7 +184,7 @@ export const AuthorView = (props: Props) => {
                   class={styles.longBio}
                   classList={{ [styles.longBioExpanded]: isBioExpanded() }}
                 >
-                  <div ref={setBioContainer}>{author().about}</div>
+                  <div ref={(el) => (bioContainerRef.current = el)} innerHTML={author().about} />
                 </div>
 
                 <Show when={showExpandBioControl()}>
diff --git a/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx b/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx
index 247355bc..fc53411b 100644
--- a/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx
+++ b/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx
@@ -40,45 +40,43 @@ export const GrowingTextarea = (props: Props) => {
   }
 
   return (
-    <Show when={value()}>
-      <div
-        class={clsx(styles.GrowingTextarea, {
-          [styles.bordered]: props.variant === 'bordered',
-          [styles.hasFieldName]: props.fieldName && value().length > 0
-        })}
-      >
-        <Show when={props.fieldName && value().length > 0}>
-          <div class={styles.fieldName}>{props.fieldName}</div>
-        </Show>
-        <div class={clsx(styles.growWrap, props.class)} data-replicated-value={value()}>
-          <textarea
-            ref={props.textAreaRef}
-            rows={1}
-            maxlength={props.maxLength}
-            autocomplete="off"
-            class={clsx(styles.textInput, props.class)}
-            value={props.maxLength ? props.initialValue.slice(0, props.maxLength) : props.initialValue}
-            onKeyDown={props.allowEnterKey ? handleKeyDown : null}
-            onInput={(event) => handleChangeValue(event)}
-            onChange={(event) => props.value(event.target.value)}
-            placeholder={props.placeholder}
-            onFocus={() => setIsFocused(true)}
-            onBlur={() => setIsFocused(false)}
-          />
-        </div>
-        <Show when={(props.maxLength && value() && isFocused()) || props.variant === 'bordered'}>
-          <div
-            class={clsx(styles.maxLength, {
-              [styles.visible]: isFocused(),
-              [styles.limited]: value().length === props.maxLength
-            })}
-          >
-            <Show when={props.variant === 'bordered'} fallback={`${value().length} / ${props.maxLength}`}>
-              {`${props.maxLength - value().length}`}
-            </Show>
-          </div>
-        </Show>
+    <div
+      class={clsx(styles.GrowingTextarea, {
+        [styles.bordered]: props.variant === 'bordered',
+        [styles.hasFieldName]: props.fieldName && value().length > 0
+      })}
+    >
+      <Show when={props.fieldName && value().length > 0}>
+        <div class={styles.fieldName}>{props.fieldName}</div>
+      </Show>
+      <div class={clsx(styles.growWrap, props.class)} data-replicated-value={value()}>
+        <textarea
+          ref={props.textAreaRef}
+          rows={1}
+          maxlength={props.maxLength}
+          autocomplete="off"
+          class={clsx(styles.textInput, props.class)}
+          value={props.maxLength ? props.initialValue.slice(0, props.maxLength) : props.initialValue}
+          onKeyDown={props.allowEnterKey ? handleKeyDown : null}
+          onInput={(event) => handleChangeValue(event)}
+          onChange={(event) => props.value(event.target.value)}
+          placeholder={props.placeholder}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+        />
       </div>
-    </Show>
+      <Show when={(props.maxLength && value() && isFocused()) || props.variant === 'bordered'}>
+        <div
+          class={clsx(styles.maxLength, {
+            [styles.visible]: isFocused(),
+            [styles.limited]: value().length === props.maxLength
+          })}
+        >
+          <Show when={props.variant === 'bordered'} fallback={`${value().length} / ${props.maxLength}`}>
+            {`${props.maxLength - value().length}`}
+          </Show>
+        </div>
+      </Show>
+    </div>
   )
 }