mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 13:09:40 +08:00
Code Issues Actions 50 Packages Projects Releases Wiki Activity

fix: when we apply style resize: none, TextArea should be not resizable when showCount is applied (#37855)

Browse Source 
Co-authored-by: tangwenhui <tangwenhui@rd.netease.com>
This commit is contained in:
kiner-tang(文辉) 2022-10-06 19:19:16 +08:00 committed by GitHub
parent a922b26ffc
commit 6d253369d4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 70 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/input/TextArea.tsx
View File

@ -193,7 +193,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
},
getStatusClassNames(prefixCls, mergedStatus),
)}
style={showCount ? undefined : style}
style={showCount ? { resize: style?.resize } : style}
prefixCls={prefixCls}
onCompositionStart={onInternalCompositionStart}
onChange={handleChange}

32
components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -9751,15 +9751,29 @@ Array [
`;
exports[`renders ./components/input/demo/textarea-show-count.md extend context correctly 1`] = `
<div
class="ant-input-textarea ant-input-textarea-show-count"
data-count="0 / 100"
style="height: 120px;"
>
<textarea
class="ant-input"
/>
</div>
Array [
<div
class="ant-input-textarea ant-input-textarea-show-count"
data-count="0 / 100"
style="height: 120px;"
>
<textarea
class="ant-input"
placeholder="can resize"
/>
</div>,
<div
class="ant-input-textarea ant-input-textarea-show-count"
data-count="0 / 100"
style="height: 120px; resize: none;"
>
<textarea
class="ant-input"
placeholder="disable resize"
style="resize: none;"
/>
</div>,
]
`;
exports[`renders ./components/input/demo/tooltip.md extend context correctly 1`] = `

32
components/input/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -3532,15 +3532,29 @@ Array [
`;
exports[`renders ./components/input/demo/textarea-show-count.md correctly 1`] = `
<div
class="ant-input-textarea ant-input-textarea-show-count"
data-count="0 / 100"
style="height: 120px;"
>
<textarea
class="ant-input"
/>
</div>
Array [
<div
class="ant-input-textarea ant-input-textarea-show-count"
data-count="0 / 100"
style="height: 120px;"
>
<textarea
class="ant-input"
placeholder="can resize"
/>
</div>,
<div
class="ant-input-textarea ant-input-textarea-show-count"
data-count="0 / 100"
style="height: 120px; resize: none;"
>
<textarea
class="ant-input"
placeholder="disable resize"
style="resize: none;"
/>
</div>,
]
`;
exports[`renders ./components/input/demo/tooltip.md correctly 1`] = `

7
components/input/__tests__/textarea.test.tsx
View File

@ -223,6 +223,13 @@ describe('TextArea', () => {
jest.useRealTimers();
});
it('should disabled trigger onResize', async () => {
const { container } = render(<TextArea showCount style={{ resize: 'none' }} />);
expect(container.innerHTML).toContain('resize: none;');
const { container: container2 } = render(<TextArea showCount />);
expect(container2.innerHTML).not.toContain('resize: none;');
});
it('should works same as Input', () => {
const { container: inputContainer, rerender: inputRerender } = render(<Input value="111" />);
const { container: textareaContainer, rerender: textareaRerender } = render(

17
components/input/demo/textarea-show-count.md
View File

@ -24,7 +24,22 @@ const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
};
const App: React.FC = () => (
<TextArea showCount maxLength={100} style={{ height: 120 }} onChange={onChange} />
<>
<TextArea
showCount
maxLength={100}
style={{ height: 120 }}
onChange={onChange}
placeholder="can resize"
/>
<TextArea
showCount
maxLength={100}
style={{ height: 120, resize: 'none' }}
onChange={onChange}
placeholder="disable resize"
/>
</>
);
export default App;