Skip to content

Commit

Permalink
🐛 Fix Input.Password cannot get input element (ant-design#18441)
Browse files Browse the repository at this point in the history 
close ant-design#18412
  • Loading branch information
@afc163
afc163 authored Aug 23, 2019
1 parent 021e9af commit c6c947f
Show file tree
Hide file tree
Showing 5 changed files with 341 additions and 306 deletions.
19 changes: 19 additions & 0 deletions components/input/Password.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const ActionMap: Record<string, string> = {
};

export default class Password extends React.Component<PasswordProps, PasswordState> {
input: HTMLInputElement;

static defaultProps = {
inputPrefixCls: 'ant-input',
prefixCls: 'ant-input-password',
Expand Down Expand Up @@ -52,6 +54,22 @@ export default class Password extends React.Component<PasswordProps, PasswordSta
return <Icon {...iconProps} />;
}

saveInput = (instance: Input) => {
this.input = instance.input;
};

focus() {
this.input.focus();
}

blur() {
this.input.blur();
}

select() {
this.input.select();
}

render() {
const {
className,
Expand All @@ -73,6 +91,7 @@ export default class Password extends React.Component<PasswordProps, PasswordSta
className={inputClassName}
prefixCls={inputPrefixCls}
suffix={suffixIcon}
ref={this.saveInput}
/>
);
}
Expand Down
64 changes: 64 additions & 0 deletions components/input/__tests__/Password.test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import React from 'react';
import { mount } from 'enzyme';
// eslint-disable-next-line import/no-unresolved
import Input from '..';
import focusTest from '../../../tests/shared/focusTest';

describe('Input.Password', () => {
focusTest(Input.Password);

it('should get input element from ref', () => {
const wrapper = mount(<Input.Password />);
expect(wrapper.instance().input instanceof HTMLInputElement).toBe(true);
expect(() => {
wrapper.instance().select();
}).not.toThrow();
});

it('should change type when click', () => {
const wrapper = mount(<Input.Password />);
wrapper.find('input').simulate('change', { target: { value: '111' } });
expect(wrapper).toMatchSnapshot();
wrapper
.find('.ant-input-password-icon')
.at(0)
.simulate('click');
expect(wrapper).toMatchSnapshot();
wrapper
.find('.ant-input-password-icon')
.at(0)
.simulate('click');
expect(wrapper).toMatchSnapshot();
});

it('visibilityToggle should work', () => {
const wrapper = mount(<Input.Password visibilityToggle={false} />);
expect(wrapper.find('.anticon-eye').length).toBe(0);
wrapper.setProps({ visibilityToggle: true });
expect(wrapper.find('.anticon-eye-invisible').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(),
);
});
});
258 changes: 258 additions & 0 deletions components/input/__tests__/__snapshots__/Password.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,258 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Input.Password should change type when click 1`] = `
<Password
action="click"
inputPrefixCls="ant-input"
prefixCls="ant-input-password"
visibilityToggle={true}
>
<Input
action="click"
className="ant-input-password"
prefixCls="ant-input"
suffix={
<Icon
className="ant-input-password-icon"
onClick={[Function]}
onMouseDown={[Function]}
type="eye-invisible"
/>
}
type="password"
>
<span
className="ant-input-password ant-input-affix-wrapper"
>
<input
action="click"
className="ant-input"
onChange={[Function]}
onKeyDown={[Function]}
style={null}
type="password"
value="111"
/>
<span
className="ant-input-suffix"
>
<Icon
className="ant-input-password-icon"
key="passwordIcon"
onClick={[Function]}
onMouseDown={[Function]}
type="eye-invisible"
>
<LocaleReceiver
componentName="Icon"
>
<i
aria-label="icon: eye-invisible"
className="anticon anticon-eye-invisible ant-input-password-icon"
onClick={[Function]}
onMouseDown={[Function]}
tabIndex={-1}
>
<IconReact
className=""
type="eye-invisible-o"
>
<svg
aria-hidden="true"
className=""
data-icon="eye-invisible"
fill="currentColor"
focusable="false"
height="1em"
key="svg-eye-invisible"
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 0 0 0-51.5zm-63.57-320.64L836 122.88a8 8 0 0 0-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 0 0 0 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 0 0 0 11.31L155.17 889a8 8 0 0 0 11.31 0l712.15-712.12a8 8 0 0 0 0-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 0 0-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 0 1 146.2-106.69L401.31 546.2A112 112 0 0 1 396 512z"
key="svg-eye-invisible-svg-0"
/>
<path
d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 0 0 227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 0 1-112 112z"
key="svg-eye-invisible-svg-1"
/>
</svg>
</IconReact>
</i>
</LocaleReceiver>
</Icon>
</span>
</span>
</Input>
</Password>
`;

exports[`Input.Password should change type when click 2`] = `
<Password
action="click"
inputPrefixCls="ant-input"
prefixCls="ant-input-password"
visibilityToggle={true}
>
<Input
action="click"
className="ant-input-password"
prefixCls="ant-input"
suffix={
<Icon
className="ant-input-password-icon"
onClick={[Function]}
onMouseDown={[Function]}
type="eye"
/>
}
type="text"
>
<span
className="ant-input-password ant-input-affix-wrapper"
>
<input
action="click"
className="ant-input"
onChange={[Function]}
onKeyDown={[Function]}
style={null}
type="text"
value="111"
/>
<span
className="ant-input-suffix"
>
<Icon
className="ant-input-password-icon"
key="passwordIcon"
onClick={[Function]}
onMouseDown={[Function]}
type="eye"
>
<LocaleReceiver
componentName="Icon"
>
<i
aria-label="icon: eye"
className="anticon anticon-eye ant-input-password-icon"
onClick={[Function]}
onMouseDown={[Function]}
tabIndex={-1}
>
<IconReact
className=""
type="eye-o"
>
<svg
aria-hidden="true"
className=""
data-icon="eye"
fill="currentColor"
focusable="false"
height="1em"
key="svg-eye"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 0 0 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
key="svg-eye-svg-0"
/>
</svg>
</IconReact>
</i>
</LocaleReceiver>
</Icon>
</span>
</span>
</Input>
</Password>
`;

exports[`Input.Password should change type when click 3`] = `
<Password
action="click"
inputPrefixCls="ant-input"
prefixCls="ant-input-password"
visibilityToggle={true}
>
<Input
action="click"
className="ant-input-password"
prefixCls="ant-input"
suffix={
<Icon
className="ant-input-password-icon"
onClick={[Function]}
onMouseDown={[Function]}
type="eye-invisible"
/>
}
type="password"
>
<span
className="ant-input-password ant-input-affix-wrapper"
>
<input
action="click"
className="ant-input"
onChange={[Function]}
onKeyDown={[Function]}
style={null}
type="password"
value="111"
/>
<span
className="ant-input-suffix"
>
<Icon
className="ant-input-password-icon"
key="passwordIcon"
onClick={[Function]}
onMouseDown={[Function]}
type="eye-invisible"
>
<LocaleReceiver
componentName="Icon"
>
<i
aria-label="icon: eye-invisible"
className="anticon anticon-eye-invisible ant-input-password-icon"
onClick={[Function]}
onMouseDown={[Function]}
tabIndex={-1}
>
<IconReact
className=""
type="eye-invisible-o"
>
<svg
aria-hidden="true"
className=""
data-icon="eye-invisible"
fill="currentColor"
focusable="false"
height="1em"
key="svg-eye-invisible"
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 0 0 0-51.5zm-63.57-320.64L836 122.88a8 8 0 0 0-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 0 0 0 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 0 0 0 11.31L155.17 889a8 8 0 0 0 11.31 0l712.15-712.12a8 8 0 0 0 0-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 0 0-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 0 1 146.2-106.69L401.31 546.2A112 112 0 0 1 396 512z"
key="svg-eye-invisible-svg-0"
/>
<path
d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 0 0 227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 0 1-112 112z"
key="svg-eye-invisible-svg-1"
/>
</svg>
</IconReact>
</i>
</LocaleReceiver>
</Icon>
</span>
</span>
</Input>
</Password>
`;
Loading

0 comments on commit c6c947f

Please sign in to comment.