github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: textarea scroll at firfox

pull/1965/head
tanjinzhou 2020-03-26 18:32:42 +08:00
parent 700427d1ae
commit 80ca9b0644
3 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/descriptions/style/index.less
View File

@ -41,7 +41,6 @@
font-weight: normal;
font-size: @font-size-base;
line-height: @line-height-base;
white-space: nowrap;
&::after {
position: relative;

17
components/input/ResizableTextArea.jsx
View File

@ -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,

6
components/input/__tests__/__snapshots__/demo.test.js.snap
View File

@ -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">`;