input element loses focus after typing about nestedlink HOT 9 CLOSED

import React from 'react'
import { withRouter } from 'react-router'
import { graphql } from 'react-apollo'
import gql from 'graphql-tag'
import PropTypes from 'prop-types'
import { Alert, Label } from 'reactstrap';
import Link, { LinkedComponent } from 'valuelink'
import { Input, TextArea, Checkbox } from 'valuelink/tags'

class CreateUser extends LinkedComponent {

  static propTypes = {
      router: PropTypes.object.isRequired,
      createUser: PropTypes.func.isRequired,
      signinUser: PropTypes.func.isRequired,
      data: PropTypes.object.isRequired,
  }

  state = {
      email: this.props.location.query.email || '',
      password: '',
      name: '',  
  }

  handleUserInput = (e) =>{
    const name = e.target.name;
    const value = e.target.value;
    this.setState({[name]: value});
  }

  handleSubmit(event) {
      event.preventDefault();
  }
  isSubmittable() {
      return this.state.email && this.state.password && this.state.name;
  }

 
  render() {
 
    const FormInput = ({ label, ...props }) => (
      <span className="form-group" >
        <Label className='form-label'> { label } </Label>
          <Input className='from-control' { ...props } />
          <div className="error-placeholder">
            { props.valueLink.error || '' }
          </div>
      </span>
    );

    const nameLink=Link.state(this, 'name')
      .check( x => x.length >= 2, 'You forgot to type a name')
      .check( x => x.indexOf( ' ' ) < 0, "The name you choose shouldn't contain spaces");

    const emailRegexPattern = /^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i;
    const emailLink=Link.state(this, 'email')
      .check( x => x, 'You forgot to enter your email')
      .check( x => x.match(emailRegexPattern), "Please enter a valid email adress");

    const passwordLink=Link.state(this, 'password')
      .check( x => x.length >= 6, 'Your password should be min 6 characters long')
      .check( x => x.match(/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/), 'Your Password should contain at least one digit');


    if (this.props.data.loading) {
      return (<div>Loading</div>)
    }

    // redirect if user is logged in
    if (this.props.data.user) {
      console.warn('already logged in')
      this.props.router.replace('/')
    }

    return (
      <div className='w-100 pa4 flex justify-center'>
        <div style={{ maxWidth: 400 }} className=''>
          <form onSubmit={this.handleSubmit}>
            <div>
              <div>
                <FormInput label="Name" className="w-100 pa3 name-from" type="text" placeholder="name" valueLink={ nameLink } />
                <FormInput label="Email" className="w-100 pa3 email-from" type="email" placeholder="[email protected]" valueLink={ emailLink } />
                <FormInput label="Password" className="w-100 pa3 pwd-from" type="password" placeholder="password" valueLink={ passwordLink } />
              </div>
              <button type="submit" disabled={(this.isSubmittable() ? "" : "disabled")} className={'pa3 bn ttu pointer' + (this.isSubmittable() ? " bg-black-10 dim" : " black-30 bg-black-05 disabled")} onClick={this.createUser}>Sign up</button>
          </div>
        </form>
      </div>
    </div>
  )
}

createUser = () => {
  const { email, password, name } = this.state

  this.props.createUser({ variables: { email, password, name } })
      .then((response) => {
          this.props.signinUser({ variables: { email, password } })
              .then((response) => {
                  window.localStorage.setItem('graphcoolToken', response.data.signinUser.token)
                  this.props.router.replace('/')
              }).catch((e) => {
                  console.error(e)
                  this.props.router.replace('/')
              })
      }).catch((e) => {
          console.error(e)
          this.props.router.replace('/')
      })
  }
}

const createUser = gql `
  mutation ($email: String!, $password: String!, $name: String!) {
    createUser(authProvider: {email: {email: $email, password: $password}}, name: $name) {
      id
    }
  }
`
const signinUser = gql `
  mutation ($email: String!, $password: String!) {
    signinUser(email: {email: $email, password: $password}) {
      token
    }
  }
`
const userQuery = gql `
  query {
    user {
      id
    }
  }
`
export default graphql(createUser, { name: 'createUser' })(
    graphql(userQuery, { options: { forceFetch: true } })(
        graphql(signinUser, { name: 'signinUser' })(
            withRouter(CreateUser))
    )
)

const FormInput = ({ label, ...props }) => (
  <span className="form-group" >
    <Label className='form-label'> { label } </Label>
      <Input className='from-control' { ...props } />
      <div className="error-placeholder">
        { props.valueLink.error || '' }
      </div>
  </span>
);