From b9ab1c8a1c559c5bdb645ea1fa0f28dda9f44ca6 Mon Sep 17 00:00:00 2001
From: Eduard Kuzmenko <thanwords24@gmail.com>
Date: Mon, 1 Feb 2021 04:31:34 +0200
Subject: [PATCH] Hide scrollbar on input height animation

---
 src/components/inputField.ts       | 13 ++++++++++++-
 src/scss/partials/_scrollable.scss | 13 ++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/inputField.ts b/src/components/inputField.ts
index 2416e894..ceac41bc 100644
--- a/src/components/inputField.ts
+++ b/src/components/inputField.ts
@@ -1,4 +1,5 @@
 import { getRichValue, isInputEmpty } from "../helpers/dom";
+import { debounce } from "../helpers/schedulers";
 import { checkRTL } from "../helpers/string";
 import RichTextProcessor from "../lib/richtextprocessor";
 
@@ -56,6 +57,8 @@ class InputField {
   public inputFake: HTMLElement;
 
   //public onLengthChange: (length: number, isOverflow: boolean) => void;
+  private wasInputFakeHeight: number;
+  private showScrollDebounced: () => void;
 
   constructor(private options: {
     placeholder?: string, 
@@ -111,7 +114,9 @@ class InputField {
       observer.observe(input, {characterData: true, childList: true, subtree: true});
 
       if(options.animate) {
-        input.classList.add('scrollable', 'scrollable-y')
+        input.classList.add('scrollable', 'scrollable-y');
+        this.wasInputFakeHeight = 0;
+        this.showScrollDebounced = debounce(() => this.input.classList.remove('no-scrollbar'), 150, false, true);
         this.inputFake = document.createElement('div');
         this.inputFake.setAttribute('contenteditable', 'true');
         this.inputFake.className = input.className + ' input-field-input-fake';
@@ -158,6 +163,12 @@ class InputField {
 
   public onFakeInput() {
     const scrollHeight = this.inputFake.scrollHeight;
+    if(this.wasInputFakeHeight && this.wasInputFakeHeight !== scrollHeight) {
+      this.input.classList.add('no-scrollbar'); // ! в сафари может вообще не появиться скролл после анимации, так как ему нужен полный reflow блока с overflow.
+      this.showScrollDebounced();
+    }
+
+    this.wasInputFakeHeight = scrollHeight;
     this.input.style.height = scrollHeight ? scrollHeight + 'px' : '';
   }
 
diff --git a/src/scss/partials/_scrollable.scss b/src/scss/partials/_scrollable.scss
index 49c00d33..3b3ab59f 100644
--- a/src/scss/partials/_scrollable.scss
+++ b/src/scss/partials/_scrollable.scss
@@ -38,10 +38,21 @@ html:not(.is-safari):not(.is-ios) {
   }
 }
 
-.scrollable-x::-webkit-scrollbar {
+.scrollable-x::-webkit-scrollbar,
+.no-scrollbar::-webkit-scrollbar {
   display: none; // for safari iOS
 }
 
+/* .no-scrollbar::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.no-scrollbar::-webkit-scrollbar-thumb {
+  width: 0;
+  height: 0;
+} */
+
 .scrollable {
   width: 100%;
   height: 100%;