mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
Fix form input shaking (#23924)
This commit is contained in:
Amumu
GitHub
parent
30c702b34b
commit
fa899ff64f
@ -257,7 +257,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
|
|||||||
let classes = `${prefixCls}-item-control`;
|
let classes = `${prefixCls}-item-control`;
|
||||||
if (validateStatus) {
|
if (validateStatus) {
|
||||||
classes = classNames(`${prefixCls}-item-control`, {
|
classes = classNames(`${prefixCls}-item-control`, {
|
||||||
'has-feedback': props.hasFeedback || validateStatus === 'validating',
|
'has-feedback': validateStatus && props.hasFeedback,
|
||||||
'has-success': validateStatus === 'success',
|
'has-success': validateStatus === 'success',
|
||||||
'has-warning': validateStatus === 'warning',
|
'has-warning': validateStatus === 'warning',
|
||||||
'has-error': validateStatus === 'error',
|
'has-error': validateStatus === 'error',
|
||||||
|
|||||||
@ -26,3 +26,161 @@ exports[`Form Form.Item should support data-*、aria-* and custom attribute 1`]
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`Form FormItem FormItem: generate snapshot when validates fields 1`] = `
|
||||||
|
<form
|
||||||
|
class="ant-form ant-form-horizontal"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-row ant-form-item"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-col ant-form-item-control-wrapper"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-form-item-control"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-form-item-children"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-input-affix-wrapper"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="ant-input"
|
||||||
|
data-__field="[object Object]"
|
||||||
|
data-__meta="[object Object]"
|
||||||
|
id="test"
|
||||||
|
type="text"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-input-suffix"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Form FormItem FormItem: generate snapshot when validates fields 2`] = `
|
||||||
|
<form
|
||||||
|
class="ant-form ant-form-horizontal"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-row ant-form-item"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-col ant-form-item-control-wrapper"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-form-item-control is-validating"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-form-item-children"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-input-affix-wrapper"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="ant-input"
|
||||||
|
data-__field="[object Object]"
|
||||||
|
data-__meta="[object Object]"
|
||||||
|
id="test"
|
||||||
|
type="text"
|
||||||
|
value="test"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-input-suffix"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
aria-label="icon: close-circle"
|
||||||
|
class="anticon anticon-close-circle ant-input-clear-icon"
|
||||||
|
role="button"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class=""
|
||||||
|
data-icon="close-circle"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</i>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Form FormItem FormItem: generate snapshot when validates fields 3`] = `
|
||||||
|
<form
|
||||||
|
class="ant-form ant-form-horizontal"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-row ant-form-item"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-col ant-form-item-control-wrapper"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-form-item-control has-success"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-form-item-children"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-input-affix-wrapper"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="ant-input"
|
||||||
|
data-__field="[object Object]"
|
||||||
|
data-__meta="[object Object]"
|
||||||
|
id="test"
|
||||||
|
type="text"
|
||||||
|
value="test"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-input-suffix"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
aria-label="icon: close-circle"
|
||||||
|
class="anticon anticon-close-circle ant-input-clear-icon"
|
||||||
|
role="button"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class=""
|
||||||
|
data-icon="close-circle"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</i>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
`;
|
||||||
|
|||||||
@ -2,6 +2,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { mount, render } from 'enzyme';
|
import { mount, render } from 'enzyme';
|
||||||
import Form from '..';
|
import Form from '..';
|
||||||
|
import Input from '../../input';
|
||||||
import mountTest from '../../../tests/shared/mountTest';
|
import mountTest from '../../../tests/shared/mountTest';
|
||||||
import './type.test';
|
import './type.test';
|
||||||
|
|
||||||
@ -58,4 +59,35 @@ describe('Form', () => {
|
|||||||
expect(form).toBeInstanceOf(TestForm);
|
expect(form).toBeInstanceOf(TestForm);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('FormItem', () => {
|
||||||
|
it('FormItem: generate snapshot when validates fields', async done => {
|
||||||
|
let wrapper;
|
||||||
|
const TestForm = props => (
|
||||||
|
<Form>
|
||||||
|
<Form.Item>
|
||||||
|
{props.form.getFieldDecorator('test', {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
validator: (rule, value, callback) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
callback();
|
||||||
|
expect(wrapper.render()).toMatchSnapshot(); // after validate
|
||||||
|
done();
|
||||||
|
}, 100);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})(<Input allowClear />)}
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
);
|
||||||
|
const Wrapped = Form.create()(TestForm);
|
||||||
|
wrapper = mount(<Wrapped />);
|
||||||
|
expect(wrapper.render()).toMatchSnapshot(); // before validate
|
||||||
|
wrapper.find('.ant-input').simulate('change', { target: { value: 'test' } });
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 0));
|
||||||
|
expect(wrapper.render()).toMatchSnapshot(); // validating
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user