Comments (4)
I forked this repo and I'll try to find solution
from formsy-material-ui.
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;
from formsy-material-ui.
Not right now, but I'd be happy to take a PR for it though.
from formsy-material-ui.
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>
.
from formsy-material-ui.
Related Issues (20)
- Is there a component for file upload? HOT 1
- FormsySelect onChange getting bypassed HOT 3
- Support the incoming Material UI v1.0 HOT 10
- Text field underline color broken after 0.6.1 HOT 10
- FormsyText with type="number" bad behavior HOT 3
- FormsyAutoComplete does not use provided default value HOT 2
- FormsySelect required is not showing any error when submit the form HOT 9
- Remove FormsyAutoComplete component? HOT 1
- Warning: getDefaultProps
- FormsySelect does not change underline color when selected HOT 1
- Not working with React 16.1.1 HOT 1
- Support new Formsy
- Incorrect directory HOT 6
- Support formsy-react v1.1.2 HOT 4
- FormsyDate and FormsyTime don't handle value argument properly
- FormsyText cannot accept value 0
- Not compatible HOT 1
- not compatible with React 16.3.1 HOT 1
- Accept a list of validation errors?
- Is This Project Maintained? HOT 15
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from formsy-material-ui.