diff --git a/components/input/TextArea.tsx b/components/input/TextArea.tsx index 207e20df5a..b32e2d0b25 100644 --- a/components/input/TextArea.tsx +++ b/components/input/TextArea.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; import omit from 'omit.js'; import classNames from 'classnames'; +import { polyfill } from 'react-lifecycles-compat'; +import ResizeObserver from 'resize-observer-polyfill'; import calculateNodeHeight from './calculateNodeHeight'; function onNextFrame(cb: () => void) { @@ -35,12 +37,13 @@ export interface TextAreaState { textareaStyles?: React.CSSProperties; } -export default class TextArea extends React.Component { +class TextArea extends React.Component { static defaultProps = { prefixCls: 'ant-input', }; nextFrameActionId: number; + resizeObserver: ResizeObserver | null; state = { textareaStyles: {}, @@ -50,15 +53,40 @@ export default class TextArea extends React.Component { + if (this.nextFrameActionId) { + clearNextFrameAction(this.nextFrameActionId); + } + this.nextFrameActionId = onNextFrame(this.resizeTextarea); + } + + // We will update hooks if `autosize` prop change + updateResizeObserverHook() { + if (!this.resizeObserver && this.props.autosize) { + // Add resize observer + this.resizeObserver = new ResizeObserver(this.resizeOnNextFrame); + this.resizeObserver.observe(this.textAreaRef); + } else if (this.resizeObserver && !this.props.autosize) { + // Remove resize observer + this.resizeObserver.disconnect(); + this.resizeObserver = null; } } @@ -140,3 +168,7 @@ export default class TextArea extends React.Component `; +exports[`renders ./components/input/demo/textarea-resize.md correctly 1`] = ` +
+ + +
+`; + exports[`renders ./components/input/demo/tooltip.md correctly 1`] = ` + +