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

View File

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

View File

@ -55,9 +55,24 @@ const ResizableTextArea = {
raf.cancel(this.resizeFrameId); raf.cancel(this.resizeFrameId);
this.resizeFrameId = raf(() => { this.resizeFrameId = raf(() => {
this.setState({ resizing: false }); 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() { renderTextArea() {
const props = getOptionProps(this); const props = getOptionProps(this);
@ -89,7 +104,7 @@ const ResizableTextArea = {
} }
const style = { const style = {
...textareaStyles, ...textareaStyles,
...(resizing ? { overflow: 'hidden' } : null), ...(resizing ? { overflowX: 'hidden', overflowY: 'hidden' } : null),
}; };
const textareaProps = { const textareaProps = {
attrs: otherProps, attrs: otherProps,

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/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`] = ` 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><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: 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: hidden;"></textarea></div> <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">`; exports[`renders ./antdv-demo/docs/input/demo/basic.md correctly 1`] = `<input placeholder="Basic usage" type="text" class="ant-input">`;