mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 12:09:14 +08:00
fix: form item Input size error with prefix or suffix (#21290)
* fix form item Input size error with prefix and suffix * snapshot * add test case * revert width
This commit is contained in:
Amumu
GitHub
parent
cdf9673d04
commit
02a71d0ddd
@ -263,6 +263,7 @@ class Input extends React.Component<InputProps, InputState> {
|
||||
<SizeContext.Consumer>
|
||||
{size => (
|
||||
<ClearableLabeledInput
|
||||
size={size}
|
||||
{...this.props}
|
||||
prefixCls={prefixCls}
|
||||
inputType="input"
|
||||
|
||||
@ -91,16 +91,17 @@ export default class Password extends React.Component<PasswordProps, PasswordSta
|
||||
const inputClassName = classNames(prefixCls, className, {
|
||||
[`${prefixCls}-${size}`]: !!size,
|
||||
});
|
||||
return (
|
||||
<Input
|
||||
{...omit(restProps, ['suffix'])}
|
||||
type={this.state.visible ? 'text' : 'password'}
|
||||
size={size}
|
||||
className={inputClassName}
|
||||
prefixCls={inputPrefixCls}
|
||||
suffix={suffixIcon}
|
||||
ref={this.saveInput}
|
||||
/>
|
||||
);
|
||||
const props = {
|
||||
...omit(restProps, ['suffix']),
|
||||
type: this.state.visible ? 'text' : 'password',
|
||||
className: inputClassName,
|
||||
prefixCls: inputPrefixCls,
|
||||
suffix: suffixIcon,
|
||||
ref: this.saveInput,
|
||||
};
|
||||
if (size) {
|
||||
props.size = size;
|
||||
}
|
||||
return <Input {...props} />;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2042,24 +2042,147 @@ exports[`renders ./components/input/demo/size.md correctly 1`] = `
|
||||
<div
|
||||
class="example-input"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-input-lg"
|
||||
placeholder="large size"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<input
|
||||
class="ant-input"
|
||||
placeholder="default size"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<input
|
||||
class="ant-input ant-input-sm"
|
||||
placeholder="small size"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-affix-wrapper-lg"
|
||||
>
|
||||
<span
|
||||
class="ant-input-prefix"
|
||||
>
|
||||
<span
|
||||
aria-label="user"
|
||||
class="anticon anticon-user"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="user"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<input
|
||||
class="ant-input ant-input-lg"
|
||||
placeholder="large size"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-input-affix-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-input-prefix"
|
||||
>
|
||||
<span
|
||||
aria-label="user"
|
||||
class="anticon anticon-user"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="user"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<input
|
||||
class="ant-input"
|
||||
placeholder="default size"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-affix-wrapper-sm"
|
||||
>
|
||||
<span
|
||||
class="ant-input-prefix"
|
||||
>
|
||||
<span
|
||||
aria-label="user"
|
||||
class="anticon anticon-user"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="user"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<input
|
||||
class="ant-input ant-input-sm"
|
||||
placeholder="small size"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-input-password ant-input-password-large ant-input-affix-wrapper ant-input-affix-wrapper-lg"
|
||||
>
|
||||
<input
|
||||
action="click"
|
||||
class="ant-input ant-input-lg"
|
||||
placeholder="large Password"
|
||||
type="password"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
>
|
||||
<span
|
||||
aria-label="eye-invisible"
|
||||
class="anticon anticon-eye-invisible ant-input-password-icon"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="eye-invisible"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
|
||||
/>
|
||||
<path
|
||||
d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@ -504,6 +504,174 @@ exports[`Input should support maxLength 1`] = `
|
||||
</Input>
|
||||
`;
|
||||
|
||||
exports[`Input should support size 1`] = `
|
||||
<Input
|
||||
size="large"
|
||||
type="text"
|
||||
>
|
||||
<ClearableLabeledInput
|
||||
element={
|
||||
<input
|
||||
className="ant-input ant-input-lg"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
type="text"
|
||||
/>
|
||||
}
|
||||
focused={false}
|
||||
handleReset={[Function]}
|
||||
inputType="input"
|
||||
prefixCls="ant-input"
|
||||
size="large"
|
||||
type="text"
|
||||
value=""
|
||||
>
|
||||
<input
|
||||
className="ant-input ant-input-lg"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</ClearableLabeledInput>
|
||||
</Input>
|
||||
`;
|
||||
|
||||
exports[`Input should support size in form 1`] = `
|
||||
<ForwardRef(InternalForm)
|
||||
size="large"
|
||||
>
|
||||
<SizeContextProvider
|
||||
size="large"
|
||||
>
|
||||
<ForwardRef(Form)
|
||||
className="ant-form ant-form-horizontal"
|
||||
form={
|
||||
Object {
|
||||
"__INTERNAL__": Object {
|
||||
"name": undefined,
|
||||
},
|
||||
"getFieldError": [Function],
|
||||
"getFieldValue": [Function],
|
||||
"getFieldsError": [Function],
|
||||
"getFieldsValue": [Function],
|
||||
"getInternalHooks": [Function],
|
||||
"isFieldTouched": [Function],
|
||||
"isFieldValidating": [Function],
|
||||
"isFieldsTouched": [Function],
|
||||
"isFieldsValidating": [Function],
|
||||
"resetFields": [Function],
|
||||
"scrollToField": [Function],
|
||||
"setFields": [Function],
|
||||
"setFieldsValue": [Function],
|
||||
"submit": [Function],
|
||||
"validateFields": [Function],
|
||||
}
|
||||
}
|
||||
size="large"
|
||||
>
|
||||
<form
|
||||
className="ant-form ant-form-horizontal"
|
||||
onSubmit={[Function]}
|
||||
size="large"
|
||||
>
|
||||
<FormItem>
|
||||
<Row
|
||||
className="ant-form-item"
|
||||
gutter={0}
|
||||
key="row"
|
||||
>
|
||||
<div
|
||||
className="ant-row ant-form-item"
|
||||
style={Object {}}
|
||||
>
|
||||
<FormItemLabel
|
||||
prefixCls="ant-form"
|
||||
/>
|
||||
<FormItemInput
|
||||
errors={Array []}
|
||||
onDomErrorVisibleChange={[Function]}
|
||||
prefixCls="ant-form"
|
||||
validateStatus=""
|
||||
>
|
||||
<Col
|
||||
className="ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
className="ant-col ant-form-item-control"
|
||||
style={Object {}}
|
||||
>
|
||||
<div
|
||||
className="ant-form-item-control-input"
|
||||
>
|
||||
<Input
|
||||
type="text"
|
||||
>
|
||||
<ClearableLabeledInput
|
||||
element={
|
||||
<input
|
||||
className="ant-input ant-input-lg"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
type="text"
|
||||
/>
|
||||
}
|
||||
focused={false}
|
||||
handleReset={[Function]}
|
||||
inputType="input"
|
||||
prefixCls="ant-input"
|
||||
size="large"
|
||||
type="text"
|
||||
value=""
|
||||
>
|
||||
<input
|
||||
className="ant-input ant-input-lg"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</ClearableLabeledInput>
|
||||
</Input>
|
||||
</div>
|
||||
<ForwardRef
|
||||
motionAppear={true}
|
||||
motionName="show-help"
|
||||
onLeaveEnd={[Function]}
|
||||
removeOnLeave={true}
|
||||
visible={false}
|
||||
>
|
||||
<CSSMotion
|
||||
internalRef={null}
|
||||
motionAppear={true}
|
||||
motionEnter={true}
|
||||
motionLeave={true}
|
||||
motionName="show-help"
|
||||
onLeaveEnd={[Function]}
|
||||
removeOnLeave={true}
|
||||
visible={false}
|
||||
/>
|
||||
</ForwardRef>
|
||||
</div>
|
||||
</Col>
|
||||
</FormItemInput>
|
||||
</div>
|
||||
</Row>
|
||||
</FormItem>
|
||||
</form>
|
||||
</ForwardRef(Form)>
|
||||
</SizeContextProvider>
|
||||
</ForwardRef(InternalForm)>
|
||||
`;
|
||||
|
||||
exports[`Input.Search should support suffix 1`] = `
|
||||
<Search
|
||||
enterButton={false}
|
||||
|
||||
@ -38,6 +38,24 @@ describe('Input', () => {
|
||||
wrapper.instance().select();
|
||||
});
|
||||
|
||||
it('should support size', () => {
|
||||
const wrapper = mount(<Input size="large" />);
|
||||
expect(wrapper.find('input').hasClass('ant-input-lg')).toBe(true);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should support size in form', () => {
|
||||
const wrapper = mount(
|
||||
<Form size="large">
|
||||
<Form.Item>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form>,
|
||||
);
|
||||
expect(wrapper.find('input').hasClass('ant-input-lg')).toBe(true);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe('focus trigger warning', () => {
|
||||
it('not trigger', () => {
|
||||
const wrapper = mount(<Input suffix="bamboo" />);
|
||||
|
||||
@ -15,19 +15,21 @@ There are three sizes of an Input box: `large` (40px), `default` (32px) and `sma
|
||||
|
||||
```jsx
|
||||
import { Input } from 'antd';
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
|
||||
ReactDOM.render(
|
||||
<div className="example-input">
|
||||
<Input size="large" placeholder="large size" />
|
||||
<Input placeholder="default size" />
|
||||
<Input size="small" placeholder="small size" />
|
||||
<Input size="large" placeholder="large size" prefix={<UserOutlined />} />
|
||||
<Input placeholder="default size" prefix={<UserOutlined />} />
|
||||
<Input size="small" placeholder="small size" prefix={<UserOutlined />} />
|
||||
<Input.Password size="large" placeholder="large Password" />
|
||||
</div>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
```css
|
||||
.example-input .ant-input {
|
||||
.example-input > span {
|
||||
width: 200px;
|
||||
margin: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user