mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
Merge pull request #15184 from ant-design/fix-input-focus-state
Fix Input Password focus state
This commit is contained in:
commit
5dec4960df
@ -142,9 +142,10 @@ class Input extends React.Component<InputProps, any> {
|
||||
setValue(
|
||||
value: string,
|
||||
e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLElement, MouseEvent>,
|
||||
callback?: () => void,
|
||||
) {
|
||||
if (!('value' in this.props)) {
|
||||
this.setState({ value });
|
||||
this.setState({ value }, callback);
|
||||
}
|
||||
const { onChange } = this.props;
|
||||
if (onChange) {
|
||||
@ -167,7 +168,9 @@ class Input extends React.Component<InputProps, any> {
|
||||
}
|
||||
|
||||
handleReset = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
|
||||
this.setValue('', e);
|
||||
this.setValue('', e, () => {
|
||||
this.focus();
|
||||
});
|
||||
};
|
||||
|
||||
handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
|
@ -39,15 +39,18 @@ export default class Password extends React.Component<PasswordProps, PasswordSta
|
||||
getIcon() {
|
||||
const { prefixCls, action } = this.props;
|
||||
const iconTrigger = ActionMap[action] || '';
|
||||
const iconProps = { [iconTrigger]: this.onChange };
|
||||
return React.cloneElement(
|
||||
<Icon
|
||||
{...iconProps}
|
||||
className={`${prefixCls}-icon`}
|
||||
type={this.state.visible ? 'eye-invisible' : 'eye'}
|
||||
key="passwordIcon"
|
||||
/>,
|
||||
);
|
||||
const iconProps = {
|
||||
[iconTrigger]: this.onChange,
|
||||
className: `${prefixCls}-icon`,
|
||||
type: this.state.visible ? 'eye-invisible' : 'eye',
|
||||
key: 'passwordIcon',
|
||||
onMouseDown: (e: MouseEvent) => {
|
||||
// Prevent focused state lost
|
||||
// https://github.com/ant-design/ant-design/issues/15173
|
||||
e.preventDefault();
|
||||
},
|
||||
};
|
||||
return <Icon {...iconProps} />;
|
||||
}
|
||||
|
||||
render() {
|
||||
|
@ -494,6 +494,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
|
||||
/>
|
||||
<span
|
||||
class="ant-calendar-picker"
|
||||
style="width:50%"
|
||||
>
|
||||
<div>
|
||||
<input
|
||||
@ -1144,6 +1145,7 @@ exports[`renders ./components/input/demo/textarea-resize.md correctly 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="ant-btn"
|
||||
style="margin-bottom:16px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
|
@ -297,6 +297,7 @@ exports[`Input.Password should change type when click 1`] = `
|
||||
<Icon
|
||||
className="ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye"
|
||||
/>
|
||||
}
|
||||
@ -323,6 +324,7 @@ exports[`Input.Password should change type when click 1`] = `
|
||||
className="ant-input-password-icon"
|
||||
key="passwordIcon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye"
|
||||
>
|
||||
<LocaleReceiver
|
||||
@ -332,6 +334,7 @@ exports[`Input.Password should change type when click 1`] = `
|
||||
aria-label="icon: eye"
|
||||
className="anticon anticon-eye ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<IconReact
|
||||
@ -380,6 +383,7 @@ exports[`Input.Password should change type when click 2`] = `
|
||||
<Icon
|
||||
className="ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye-invisible"
|
||||
/>
|
||||
}
|
||||
@ -406,6 +410,7 @@ exports[`Input.Password should change type when click 2`] = `
|
||||
className="ant-input-password-icon"
|
||||
key="passwordIcon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye-invisible"
|
||||
>
|
||||
<LocaleReceiver
|
||||
@ -415,6 +420,7 @@ exports[`Input.Password should change type when click 2`] = `
|
||||
aria-label="icon: eye-invisible"
|
||||
className="anticon anticon-eye-invisible ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<IconReact
|
||||
@ -467,6 +473,7 @@ exports[`Input.Password should change type when click 3`] = `
|
||||
<Icon
|
||||
className="ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye"
|
||||
/>
|
||||
}
|
||||
@ -493,6 +500,7 @@ exports[`Input.Password should change type when click 3`] = `
|
||||
className="ant-input-password-icon"
|
||||
key="passwordIcon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye"
|
||||
>
|
||||
<LocaleReceiver
|
||||
@ -502,6 +510,7 @@ exports[`Input.Password should change type when click 3`] = `
|
||||
aria-label="icon: eye"
|
||||
className="anticon anticon-eye ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<IconReact
|
||||
|
@ -201,6 +201,24 @@ describe('Input.Password', () => {
|
||||
wrapper.setProps({ visibilityToggle: true });
|
||||
expect(wrapper.find('.anticon-eye').length).toBe(1);
|
||||
});
|
||||
|
||||
it('should keep focus state', () => {
|
||||
const wrapper = mount(<Input.Password defaultValue="111" autoFocus />);
|
||||
expect(document.activeElement).toBe(
|
||||
wrapper.find('input').at(0).getDOMNode()
|
||||
);
|
||||
wrapper
|
||||
.find('.ant-input-password-icon')
|
||||
.at(0)
|
||||
.simulate('mousedown');
|
||||
wrapper
|
||||
.find('.ant-input-password-icon')
|
||||
.at(0)
|
||||
.simulate('click');
|
||||
expect(document.activeElement).toBe(
|
||||
wrapper.find('input').at(0).getDOMNode()
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Input allowClear', () => {
|
||||
@ -280,4 +298,15 @@ describe('Input allowClear', () => {
|
||||
.getDOMNode().value,
|
||||
).toBe('111');
|
||||
});
|
||||
|
||||
it('should focus input after clear', () => {
|
||||
const wrapper = mount(<Input allowClear defaultValue="111" />);
|
||||
wrapper
|
||||
.find('.ant-input-clear-icon')
|
||||
.at(0)
|
||||
.simulate('click');
|
||||
expect(document.activeElement).toBe(
|
||||
wrapper.find('input').at(0).getDOMNode()
|
||||
);
|
||||
});
|
||||
});
|
||||
|
@ -102,7 +102,7 @@ class CompactDemo extends React.Component {
|
||||
<br />
|
||||
<InputGroup compact>
|
||||
<Input style={{ width: '50%' }} defaultValue="input content" />
|
||||
<DatePicker />
|
||||
<DatePicker style={{ width: '50%' }} />
|
||||
</InputGroup>
|
||||
<br />
|
||||
<InputGroup compact>
|
||||
|
@ -31,7 +31,7 @@ class Demo extends React.Component {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={() => this.setState({ autoResize: !autoResize })}>
|
||||
<Button onClick={() => this.setState({ autoResize: !autoResize })} style={{ marginBottom: 16 }}>
|
||||
Auto Resize: {String(autoResize)}
|
||||
</Button>
|
||||
<TextArea rows={4} autosize={autoResize} defaultValue={defaultValue} />
|
||||
|
Loading…
Reference in New Issue
Block a user