deadly0 / final-form-material-ui Goto Github PK
View Code? Open in Web Editor NEWA set of wrapper components to facilitate using Material UI with Final Form
A set of wrapper components to facilitate using Material UI with Final Form
Just simple use doesn't work:
<Field name="dhcp" component={Checkbox}/>
By just doing a import { TextField } from "final-form-material-ui";
I am gettting a Reference Error of windows which is not defined.
Hello,
i try to use an onChange Event:
<Field fullWidth id="title" component={TextField} name="title" onChange={(e) => onTitleChange(e)} placeholder="Title" label="Titel" />
But the event is not fired.
I also tried:
<Field fullWidth id="title" component={TextField} name="title" inputProps={{onChange: console.log('test')}} placeholder="Title" label="Titel" />
Any help?
Thank you very much!
Material UI supports great autosuggest components, which especially help with long lists or when the user is unfamiliar with the options. So far, react-select seems to be one of the more popular ones.
React-select's autosuggest component replaces MUI's Select:
import Select from 'react-select';
(see codesandbox link)
Trying to integrate with react-select (like editing src/select.tsx accordingly) will look okay on the surface, but the input's value is not available.
It would be awesome to support these date pickers and time pickers. I have added an example in https://codesandbox.io/s/9ywq085k9w.
If a field is set to auto focus and a user moves away from the field without making any changes, validation runs and errors display. I think that errors shouldn't be displayed until a field has been modified. Final Form provides the modified meta value, therefore this should be an easy change.
Hi,
how can I set up a multiple select like the one with the tags in this example?
Thanks
<Field
className={classes.textField}
name="
color="primary"
component={TextField}
type="text"
variant="outlined"
required={true}
label="email"/>
I am currently using the component like above. However, even when I have set the primary color to be orange in the theme, the textfield outline color stays black and the error color is red. How do I change the outline color?
In TextField, there is this code: helperText={showError ? meta.error || meta.submitError : undefined}
that basically ignores any initial value of helperText.
Is there any reason not to have the code like:
helperText={showError ? meta.error || meta.submitError : rest.helperText} ...or something to that effect?
I apologize if I violated your guidelines for requesting a feature.
@Deadly0 It's a great project, thank you for creating it!
I have made a live demo integration, do you want to link it in the documentation? https://codesandbox.io/s/9ywq085k9w :)
Hi,
can anyone help me why the Select won't open at first click?
https://stackblitz.com/edit/react-jtv7me?file=demo.js
final-form-material-ui/src/Select.tsx
Line 28 in 555cb24
The label should also be passed to the Select component to display the label correctly.
Type error: Type 'FunctionComponent' is not assignable to type 'string | ComponentClass<FieldRenderProps, any> | FunctionComponent | undefined'.
Type 'FunctionComponent' is not assignable to type 'FunctionComponent'.
Types of parameters 'props' and 'props' are incompatible.
Type 'FieldRenderProps & { children?: ReactNode; }' is not assignable to type 'FormHelperTextWrapperProps & { children?: ReactNode; }'.
Type 'FieldRenderProps & { children?: ReactNode; }' is missing the following properties from type 'FormHelperTextWrapperProps': label, formControlProps TS2322
141 | <div>
142 | <label>City </label>
143 | <Field name="city" label="Select city" component={FFMUI.Select}>
Up arrow pointing to the word component:
144 | <MenuItem value="London">London </MenuItem>
145 | <MenuItem value="Paris">Paris </MenuItem>
146 | </Field>
I've just found an easy workaround: type-cast the Select to any when assigned to the component prop:
component={FFMUI.Select as any}
variant="outlined"
won't work on Select components.
Neither does
formControlProps={{variant:'outlined'}}
(Unlike TextFields, where the variant property is set in the element itself, Select requires that it be set in the FormControl parent.)
Classes are not being passed down properly on focus.
For example, if you click a TextField with variant outline, the class does not get passed down properly, so no animation effect is seen when using this library. Compare the behavior of a <TextField variant=filled
> with a <TextField variant=filled
> from the material-ui/core
and you'll notice the difference in behavior.
Fix found at: final-form/react-final-form#294
Change inputProps
to InputProps
. Then everything works normally. Confirmed the fix works.
Can you please make this fix and release?
yeah i see this lib is not mainteined any more so its kinda useless to write here but for those who is looking for autocomplete bindings
https://trejgun.github.io/articles/bindings-for-using-final-form-with-material-ui-autocomplete
Right now this library only includes MUI 1.x-3.x in the peerDeps.
Given how thin a wrapper this library is, it should probably just use >= 1.0.0
instead.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.