Comments (7)
@ratonjuancarlos Thanks for sharing, I did a similar implementation using react-select
and material-ui
components.
However, the problem comes from the import of this library since I cannot benefit from TextField
or other components because it does break when I install in my codebase.
Therefore, if there are more people experience this problem, I am happy to create a PR that remove Autocomplete
from the repository in order to be able to use with the latest version of material-ui
from redux-form-material-ui.
Hi @EduardoAC,
you can create a Wrapper. you can find more information here:
Material UI Example.
In any case, here is what I did:
-
Create an Autocomplete component, copying the one that is in the Material-UI new documentation: autocomplete
-
then, create a Wrapper, that connects the redux-store, with your Autocomplete component, trough the Field component:
import AutoComplete from "./YourOwnAutoComplete";
...
const renderAutoComplete = ({
input,
name,
label,
meta: { touched, error },
children,
classes,
theme,
mySuggestions,
myIsDisabled,
myPlaceholder,
myNoOptionsMessage,
...custom
}) => {
return (
<AutoComplete
isDisabled={myIsDisabled}
onChange={event => input.onChange(input.name, event)}
noOptionsMessage={myNoOptionsMessage}
placeholder={myPlaceholder}
suggestions={mySuggestions}
value={JSON.parse(input.value)}
/>
);
};
- Now, use the redux-form Field component, with your new renderAutocomplete:
import { Field } from "redux-form";
...
<Field
name="idPrograma"
component={renderAutoComplete}
floatingLabelText="Programa"
suggestions={dataSource3}
isDisabled={false}
placeholder="Programa"
noOptionsMessage={() => "No hay programas"}
onChange={changeFieldValue}
value={selectedPrograma}
input={{
name: "idPrograma",
onChange: changeFieldValue,
value: JSON.stringify(selectedPrograma)
}}
/>
from redux-form-material-ui.
@EduardoAC I have the same issue.
from redux-form-material-ui.
@EduardoAC same problem here.
the whole package is useless because autocomplete breaks the import.
from redux-form-material-ui.
Having the same problem.
from redux-form-material-ui.
This package is for material-ui v0.X.
If you are on @material-ui v1+ you need to use this beta version.
from redux-form-material-ui.
@andreapier thanks for the information, I will close the ticket since there is a beta in progress that solve the issue
from redux-form-material-ui.
Related Issues (20)
- Autocomplete doesn't show the specific text value
- IE - Checkbox keyboard interaction
- Custom Text Field (CurrencyInput)
- Dependency Problems. -Module not found, Toggle.JS HOT 3
- Typescript Support HOT 2
- not one of your examples actually work with material-ui HOT 1
- use v4 and v5 side-by-side
- Uncaught TypeError: Cannot read property '__reactInternalInstance$b8j8e0whlm' of null
- How can i change radio button icon color HOT 1
- Radio values not stored in Redux
- Select with Nested Lists not working
- Incompatible with Material UI v4 HOT 1
- Can update to support latest @material-ui version ? HOT 5
- Can't read property render of undefined and Can't resolve 'material-ui/AutoComplete' HOT 2
- Cannot type text in the Text field
- Failed prop type: Invalid prop `component` supplied to `Field`
- componentWillMount has been renamed, and is not recommended for use.
- New material-ui 4.6.1 HOT 1
- Is it maintained? HOT 1
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 redux-form-material-ui.