[AutoComplete] WIll you do FormsyAutoComplete?

[Lol9tor]

I think it will be something like FormsyText, but some harder than one. I mean this:
http://www.material-ui.com/#/components/auto-complete

Can you do it?

[mbrookes]

Not right now, but I'd be happy to take a PR for it though.

[Lol9tor]

I forked this repo and I'll try to find solution

[simpixelated]

Here's a really basic example I'm using to create a component in my own codebase, not as a distributable component. But hopefully it points someone else in the right direction.

import React, { PropTypes, Component } from 'react';
import AutoComplete from 'material-ui/lib/auto-complete';
import { HOC } from 'formsy-react';

class FormsyAutocomplete extends Component {

  handleChange = value => this.props.setValue(value);

  render () {
    return (
      <AutoComplete
        filter={AutoComplete.noFilter}
        dataSource={this.props.options}
        onNewRequest={this.handleChange}
      />
    );
  }
}

FormsyAutocomplete.propTypes = {
  options: PropTypes.array,
  setValue: PropTypes.func.isRequired
};

export default HOC(FormsyAutocomplete);

The value is correctly passed to onValidSubmit for the parent <Formsy.Form>.

[donaldparker]

this is working for me

import React from 'react';
import keycode from 'keycode';
import Formsy from 'formsy-react';
import AutoComplete from 'material-ui/AutoComplete';
import { setMuiComponentAndMaybeFocus } from 'formsy-react/src/utils';

const FormsyAutoComplete = React.createClass({

  propTypes: {
    defaultValue: React.PropTypes.any,
    name: React.PropTypes.string.isRequired,
    onBlur: React.PropTypes.func,
    onChange: React.PropTypes.func,
    onFocus: React.PropTypes.func,
    onKeyDown: React.PropTypes.func,
    value: React.PropTypes.any
  },

  mixins: [Formsy.Mixin],

  getInitialState() {
    return {
      value: this.props.defaultValue || this.props.value || '',
    };
  },

  componentWillMount() {
    this.setValue(this.props.defaultValue || this.props.value || '');
  },

  handleBlur: function handleBlur(event) {
    this.setValue(event.currentTarget.value);
    if (this.props.onBlur) this.props.onBlur(event);
  },

  handleChange: function handleChange(event) {
    this.setState({
      value: event.currentTarget.value,
    });
    if (this.props.onChange) this.props.onChange(event);
  },

  handleKeyDown: function handleKeyDown(event) {
    if (keycode(event) === 'enter') this.setValue(event.currentTarget.value);
    if (this.props.onKeyDown) this.props.onKeyDown(event, event.currentTarget.value);
  },

  setMuiComponentAndMaybeFocus: setMuiComponentAndMaybeFocus,

  render() {
    const {
      defaultValue, // eslint-disable-line no-unused-vars
      onFocus,
      value, // eslint-disable-line no-unused-vars
      ...rest } = this.props;
    return (
      <AutoComplete
        {...rest}
        errorText={this.getErrorMessage()}
        onBlur={this.handleBlur}
        onChange={this.handleChange}
        onFocus={onFocus}
        onKeyDown={this.handleKeyDown}
        ref={this.setMuiComponentAndMaybeFocus}
        value={this.state.value}
      />
    );
  },
});

export default FormsyAutoComplete;