fix: textarea scroll at firfox

vueComponent · Mar 26, 2020 · 80ca9b0 · 80ca9b0
1 parent 700427d
commit 80ca9b0
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/components/descriptions/style/index.less b/components/descriptions/style/index.less
@@ -41,7 +41,6 @@
     font-weight: normal;
     font-size: @font-size-base;
     line-height: @line-height-base;
-    white-space: nowrap;
 
     &::after {
       position: relative;

diff --git a/components/input/ResizableTextArea.jsx b/components/input/ResizableTextArea.jsx
@@ -55,9 +55,24 @@ const ResizableTextArea = {
         raf.cancel(this.resizeFrameId);
         this.resizeFrameId = raf(() => {
           this.setState({ resizing: false });
+          this.fixFirefoxAutoScroll();
         });
       });
     },
+    // https://github.com/ant-design/ant-design/issues/21870
+    fixFirefoxAutoScroll() {
+      try {
+        if (document.activeElement === this.$refs.textArea) {
+          const currentStart = this.$refs.textArea.selectionStart;
+          const currentEnd = this.$refs.textArea.selectionEnd;
+          this.$refs.textArea.setSelectionRange(currentStart, currentEnd);
+        }
+      } catch (e) {
+        // Fix error in Chrome:
+        // Failed to read the 'selectionStart' property from 'HTMLInputElement'
+        // http://stackoverflow.com/q/21177489/3040605
+      }
+    },
 
     renderTextArea() {
       const props = getOptionProps(this);
@@ -89,7 +104,7 @@ const ResizableTextArea = {
       }
       const style = {
         ...textareaStyles,
-        ...(resizing ? { overflow: 'hidden' } : null),
+        ...(resizing ? { overflowX: 'hidden', overflowY: 'hidden' } : null),
       };
       const textareaProps = {
         attrs: otherProps,

diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap
@@ -13,9 +13,9 @@ exports[`renders ./antdv-demo/docs/input/demo/addon.md correctly 1`] = `
 exports[`renders ./antdv-demo/docs/input/demo/allowClear.md correctly 1`] = `<div><span class="ant-input-affix-wrapper"><input placeholder="input with clear icon" type="text" class="ant-input"><span class="ant-input-suffix"></span></span> <br> <br> <span class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"><textarea placeholder="textarea with clear icon" class="ant-input"></textarea></span></div>`;
 
 exports[`renders ./antdv-demo/docs/input/demo/autosize-textarea.md correctly 1`] = `
-<div><textarea placeholder="Autosize height based on content lines" class="ant-input" style="height: 0px; min-height: -9007199254740991px; max-height: 9007199254740991px; overflow: hidden;"></textarea>
-  <div style="margin: 24px 0px;"></div> <textarea placeholder="Autosize height with minimum and maximum number of lines" class="ant-input" style="height: -24px; min-height: -8px; max-height: -24px; overflow: hidden;"></textarea>
-  <div style="margin: 24px 0px;"></div> <textarea placeholder="Controlled autosize" class="ant-input" style="height: -20px; min-height: -12px; max-height: -20px; overflow: hidden;"></textarea></div>
+<div><textarea placeholder="Autosize height based on content lines" class="ant-input" style="height: 0px; min-height: -9007199254740991px; max-height: 9007199254740991px; overflow-y: hidden; overflow-x: hidden;"></textarea>
+  <div style="margin: 24px 0px;"></div> <textarea placeholder="Autosize height with minimum and maximum number of lines" class="ant-input" style="height: -24px; min-height: -8px; max-height: -24px; overflow-y: hidden; overflow-x: hidden;"></textarea>
+  <div style="margin: 24px 0px;"></div> <textarea placeholder="Controlled autosize" class="ant-input" style="height: -20px; min-height: -12px; max-height: -20px; overflow-y: hidden; overflow-x: hidden;"></textarea></div>
 `;
 
 exports[`renders ./antdv-demo/docs/input/demo/basic.md correctly 1`] = `<input placeholder="Basic usage" type="text" class="ant-input">`;