import React, { Component, PropTypes } from 'react'
import FormControl from './FormControl'

class UsernameControl extends Component {

  static propTypes = {
    suggestions: PropTypes.array,
  }

  static defaultProps = {
    className: 'UsernameControl',
    id: 'username',
    label: 'Username',
    name: 'user[username]',
    placeholder: 'Enter your username',
    suggestions: null,
  }

  onClickUsernameSuggestion = (e) => {
    const val = e.target.title
    this.formControl.onChangeControl({ target: { value: val } })
  }

  renderSuggestions = () => {
    const { suggestions } = this.props
    if (suggestions && suggestions.length) {
      return (
        <ul className="FormControlSuggestionList hasSuggestions">
          <p>Here are some available usernames &mdash;</p>
          {suggestions.map((suggestion, i) =>
            <li key={`suggestion_${i}`}>
              <button
                className="FormControlSuggestionButton"
                title={suggestion}
                onClick={this.onClickUsernameSuggestion}
              >
                {suggestion}
              </button>
            </li>
            )}
        </ul>
      )
    }
    return (
      <p className="FormControlSuggestionList">
        <span />
      </p>
    )
  }

  render() {
    return (
      <FormControl
        {...this.props}
        autoCapitalize="off"
        autoCorrect="off"
        ref={(comp) => { this.formControl = comp }}
        maxLength="50"
        renderFeedback={this.renderSuggestions}
        trimWhitespace
        type="text"
      />
    )
  }
}

export default UsernameControl


import React, { Component, PropTypes } from 'react'
import FormControl from './FormControl'

class UsernameControl extends Component {

  static propTypes = {
    suggestions: PropTypes.array,
  }

  static defaultProps = {
    className: 'UsernameControl',
    id: 'username',
    label: 'Username',
    name: 'user[username]',
    placeholder: 'Enter your username',
    suggestions: null,
  }

  onClickUsernameSuggestion = (e) => {
    const val = e.target.title
    const element = document.getElementById('username')
    if (element) {
      element.value = val
    }
  }

  renderSuggestions = () => {
    const { suggestions } = this.props
    if (suggestions && suggestions.length) {
      return (
        <ul className="FormControlSuggestionList hasSuggestions">
          <p>Here are some available usernames &mdash;</p>
          {suggestions.map((suggestion, i) =>
            <li key={`suggestion_${i}`}>
              <button
                className="FormControlSuggestionButton"
                title={suggestion}
                onClick={this.onClickUsernameSuggestion}
              >
                {suggestion}
              </button>
            </li>
            )}
        </ul>
      )
    }
    return (
      <p className="FormControlSuggestionList">
        <span />
      </p>
    )
  }

  render() {
    return (
      <FormControl
        {...this.props}
        autoCapitalize="off"
        autoCorrect="off"
        maxLength="50"
        renderFeedback={this.renderSuggestions}
        trimWhitespace
        type="text"
      />
    )
  }
}

export default UsernameControl


Fix clicking on suggestion to set the username
Fix clicking on suggestion to set the username

[Fixes: #128912639](https://www.pivotaltracker.com/story/show/128912639)
