merged fix of password change

src/widgets/in-place-edit.jsx

@@ -110,6 +110,7 @@ export default class InPlaceEdit extends React.Component {
         attr.type = this.props.type || 'text';
       }
       attr.value = this.state.value;
+      attr.ref = this.selfRef;
       attr.onChange = this.handeTextChange;
       attr.onKeyDown = this.handleKeyDown;
       attr.onBlur = this.handleEditingFinished;
@@ -118,7 +119,6 @@ export default class InPlaceEdit extends React.Component {
     attr.required = this.props.required ? 'required' : '';
     attr.autoComplete = this.props.autoComplete;
     attr.autoFocus = true;
-    attr.ref = this.selfRef;
 
     return React.createElement(element, attr, null);
   }

src/widgets/visible-password.jsx

@@ -5,6 +5,8 @@ export default class VisiblePassword extends React.PureComponent {
   constructor(props) {
     super(props);
 
+    this.inputRef = React.createRef();
+
     this.state = {
       value: this.props.value,
       visible: false
@@ -16,6 +18,10 @@ export default class VisiblePassword extends React.PureComponent {
     this.handleEditingFinished = this.handleEditingFinished.bind(this);
   }
 
+  componentDidMount() {
+    this.inputRef.current.focus();
+  }
+
   handeTextChange(e) {
     this.setState({value: e.target.value});
     if (this.props.onChange) {
@@ -58,8 +64,7 @@ export default class VisiblePassword extends React.PureComponent {
 
   render() {
     return (
-      <div tabIndex="-1" className="group-focus"
-        onBlur={this.handleEditingFinished}>
+      <div tabIndex="-1" className="group-focus" onBlur={this.handleEditingFinished}>
         <input className="with-visibility"
           type={this.state.visible ? "text" : "password"}
           value={this.state.value}
@@ -68,7 +73,8 @@ export default class VisiblePassword extends React.PureComponent {
           autoFocus={this.props.autoFocus ? 'autoFocus' : ''}
           autoComplete={this.props.autoComplete}
           onChange={this.handeTextChange}
-          onKeyDown={this.handleKeyDown} />
+          onKeyDown={this.handleKeyDown}
+          ref={this.inputRef} />
         <span onClick={this.handleVisibility}>
           <i className="material-icons clickable light-gray">
             {this.state.visible ? 'visibility' : 'visibility_off'}