fix: textarea scroll at firfox
parent
700427d1ae
commit
80ca9b0644
|
@ -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;
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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">`;
|
||||||
|
|
Loading…
Reference in New Issue