Hello,

NPM install is failing for me with an error about version conflicts through your dependency on material-ui-chip-input.

npm ERR! Could not resolve dependency:
npm ERR! peer @material-ui/core@"^1.0.0 || ^3.1.0" from [email protected]
npm ERR! node_modules/material-ui-chip-input
npm ERR!   peer material-ui-chip-input@">=1" from [email protected]
npm ERR!   node_modules/material-ui-formik-components
npm ERR!     material-ui-formik-components@"0.7.0" from the root project

Relevant content of my package.json:

    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "*",
    "formik": "^2.2.9",
    "material-ui-formik-components": "0.7.0",

I don't understand why material-ui-chip-input is being drawn into the conversation; I thought it was optional.

Thanks.

Hi

I have 2 autocomplate text fields one with single selection and other with multiselection.
When user select a value in 1st textfield then I want to call api with selected value and populate values in the multiselection textfield.

But here I am unable to get the onChange in the 1st textfield.

Can you please suggest me the solution.

Thank you

Thanks for the beautiful package. Can you add Date Range Picker to this library.

https://dev.material-ui-pickers.dev/demo/daterangepicker

Is there any way you could add support to toggle the clear button on the autocomplete component? https://material-ui.com/api/autocomplete/

There's currently no way to disable the button - but I know that the material-ui component supports it using the disableClearable prop

I have form with two fields and both of them are required, when user clicks submit before entering any data no error is shown and nothing happens.
Form return corrects errors in "error" object but nothing is displayed in UI.

Can I somehow force errors messages on not touched and empty form?

I can not get the value of DateTimePicker, I set the name, but it is not passed to JSON in values

I am trying to add a TextField with type number to my Formik form. I would also like to limit the range that this control can have (e.g. min=1, max=20, step=1). To do so I need to be able to add inputProps to the native input element rendered by TextField.

Looking at the source TextField.jsx I can see that a property for inputProps can be passed in that is then used to set the InputProps attribute. I need to be able to pass in inputProps that is then used to set the inputProps attribute (note case).

Am I missing something? Is this a bad idea?

Many thanks for the work you do.

Steve

Our project doesn't plan on using the date picker at any point. (I kind of think it's ugly tbh). If a developer is importing like

import { TextField, Select } from "material-ui-formik-components";

The compiler will complain about not having the material-ui-picker library. It should be mentioned that they can import like this as well.

import Select from "material-ui-formik-components/Select";

Passing initialValues to formik Field component with AutoComplete is broken. InitialValues are not rendered on AutoComplete component but when save is clicked then they are available in values formik variable.

Here is link to sample code based on your example from documentation:
https://codesandbox.io/s/goofy-wildflower-i3h1r

When I use the following from the sample code:

              <FormControl>
                <InputLabel htmlFor="age-simple">Age</InputLabel>
                <Select name="age"
                  inputProps={{
                    id: 'age-simple',
                  }}
                       <MenuItem value={10}>Ten</MenuItem> 
                           ...
                >

I get the following error for the Select:

Type '{ children: Element[]; name: string; inputProps: { id: string; }; }' is missing the following properties from type 'SelectProps': field, form, metats(2769)

After I started your example, Skills removed multiple choices, Submit removed disabled={!formik.dirty}, changed the validation rules skills: array().required('At least one skill is required'), and then click submit to submit the form, This form verification error is not displayed.

Please consider this scenario
https://codesandbox.io/s/material-ui-formik-components-ychoc?file=/src/index.js

The scenario simulate:
render a form with 0 fields.
Fetch some api for an user
Fill form with this data.

I used enableReinitialize to init the form when initialValues change.
For some reason when I fill my fields array with some values (values that did not existing before) the select cannot show selected value.

My workaround is to build all my field before render the form, eve is all are empty. Then it works.

Are there plans to upgrade to MUI v5?

Hello. I don't use @material-ui/pickers and any pickers but cannot use your lib without this extra dependency

Failed to compile.

./node_modules/material-ui-formik-components/DatePicker/DatePicker.js
Module not found: Can't resolve '@material-ui/pickers' in 'D:\JS\poemarket\frontend\node_modules\material-ui-formik-components\DatePicker'

same for the material-ui-chip-input

When I click submit in my code it doesn't work. Do nothing. I'm just pasting the example provided in

https://github.com/gerhat/material-ui-formik-components/blob/master/example/src/SimpleFormExample.jsx

Is there a way to use filterSelectedOptions for AutoComplete Component?
This option is would be very usable to pass to component.

how do we style the components?

This issue is related to a previous fixed issue : #28

Now, with the last version of the Library I can't use autoComplete with multiple option without initialValue.

So I try to do: skills: null and skills: [null] I have a react error,.

After that I try in another way: skills: [{ label: '', value: ''}]
This time it's work but I have an empty selected options.

You can find a working example here : https://codesandbox.io/s/nifty-turing-36dvv

Hi, I'm testing a simple registration form with an email and a password and the password field shows an error message before I've even gotten to it. Surrounding the form is a <Dialog> and <DialogContent>, but these don't seem to be the problem because I've tried with and without them and I still get the same problem:

<Formik
	initialValues={initVal}
	onSubmit={values => {
		alert(`Email: ${values.email}\nPassword: ${values.password}`);
	}}
>
	<Form> 
		<Field name="email" label="Email" component={TextField} validate={validateEmail} />
		<Field name="password" label="Password" component={TextField} type="password" validate={validatePassword}/>
		<button type="submit">Submit</button>
	</Form>
</Formik>

Specifically, I enter the form for the first time, type into the email field, and as soon as the email displays its error, so does the password field. But I haven't even touched the password field yet! I have to add

if (this.formik.touched.password == null)
	return; 

to the beginning of my password validation function to avoid errors from showing up before the field has even been touched. This works but I don't imagine I'm supposed to do this. With regular Formik, which I have tested and works fine, the <ErrorMessage> only shows up after the field has been touched. You probably already know they implement something like {errors.email && touched.email && <div>{errors.email}</div>} to avoid this specific problem, so I just wanted to check that you're doing the same? I tried looking through your source code but I'm kind of a newb so I didn't really find anything.

Is this behavior expected or is there something wrong with my form?

Thanks

Hi,

I am just wondering if we can use material UI variant like an outline in autocomplete

Thank you

Any chance you could add Typescript support? My Typescript loader complains:

TS7016: Could not find a declaration file for module 'material-ui-formik-components'. '/./node_modules/material-ui-formik-components/dist/index.js' implicitly has an 'any' type.
Try npm install @types/material-ui-formik-components if it exists or add a new declaration (.d.ts) file containing declare module 'material-ui-formik-components';

I've been struggling to make Select work, so I'm loving the module - thanks!

I tried overiding the onChange handler of AutoComplete Component, but it's not working.

<Field
              name="country"
              label="Country"
              options={countries}
              component={Autocomplete}
              onChange={e => {
                console.log(e.target.name);
              }}
            />

Issue:
The chipinput works great when it is used as a standalone field but once you nest it in the field array component of formik the values never are set in the formik state. i think because the field array uses dot notation to slice the initial values so that it can set values that are deeply nested it is not translating properly with the components set field value method of transfering state. a similar occurrence is happening with the switch component as when you change the initial state it says you are switching from an uncontrolled to a controlled component - i have not checked it yet but I bet that setFieldValue is being used in this case as well. I can't seem to get a handle on it as of yet and was hoping someone who may have experienced this previously may have found a workaround. Its almost like you will have to use the same method that they implement behind fieldArray so that when you set the value its being set as if you are setting it directly on the field prop versus the form prop. because it does work on the Select and Textinputs components. i am rambling now because it just got me thinking.

CodeSandBox:
i modified a codesandbox so you can see that the component works fine as long as its not within the fieldarray component.

Do you plan to add async autocomplete ?

Hi, I noticed that in your example RegistrationForm.jsx, if you don't touch/type anything in the form and try to submit, nothing happens.

There's no feedback at all to the user.

Then if you type 1 character in any field, the whole form gets validated with all fields in red (error).

Maybe that's expected behaviour, but giving no feedback at all to the user doesn't seem to be the best way to go. Is there a way to trigger the form validation even if the form was not touched?

Summary

The Autocomplete component does not render the height properly when using v0.4.0 with Material UI v4. This may be a result of some styling changes with Material UI v4.

Steps to Reproduce

Using codesandbox, adjust the dependency versions with material-ui-formik-components v0.4.0 and Material UI v4. Screenshot below.

The documentation says that the following packages are optional:

• Material-UI Lab >4.0 - used by Autocomplete
• Material-UI Pickers >= 3.0 - used by DatePicker, DateTimePicker, KeyboardDatePicker,KeyboardTimePicker, KeyboardDateTimePicker and TimePicker
• material-ui-chip-input >= 1.0 - used by ChipInput

However, in package.json, the above packages are listed in peerDependencies. If they are optional, they should be listed in optionalDependencies.(https://docs.npmjs.com/files/package.json#optionaldependencies)

The Select field is empty if I use make custom onChange. Anyway to fix this?

<Field
	name="name"
	label="label"
	component={Select}
	options={this.state.options}
	onChange={(e)=>{
	        formik.setFieldValue('nameValue', true);
		formik.handleSubmit(e);
	}}
/>

also I get this warning

Warning: Failed prop type: The prop value is marked as required in SelectInput, but its value is undefined.

Hi,
Thanks for an awesome library. I was wondering if you were planning on implementing a DatePicker component any time soon?

I'm trying to use RadioGroup component and get an issue "cannot read property 'formControl' of undefined"

<Field
name="seniority"
label="Seniority"
options={[
  label: 'Junior', value: 'Junior' },
]}
component={RadioGroup}
/>

FRadioGroup.render
node_modules/material-ui-formik-components/RadioGroup/RadioGroup.js:70
  67 | _createClass(FRadioGroup, [{
  68 |   key: "render",
  69 |   value: function render() {
> 70 |     var _this$props = this.props,
     | ^  71 |         label = _this$props.label,
  72 |         field = _this$props.field,
  73 |         _this$props$form = _this$props.form,

Could you add example of RadioGroup usage?

Codesandox

In /sr/Select/Select.jsx there is a missing 'name' prop on the Select field. This is giving a warning onChange and actually prevents the field from updating correctly. I'll provide a PR a little bit later that fixes it. I'm not sure if the same issue exists in the typescript file. I haven't looked. I'm not really a typescript person yet. I also noticed an issue related to the 'shrink' prop on the input label. It was acting funky, I believe I fixed that as well. Should I make a separate issue/PR for that issue?

After frustrating 2+ hours of trying to get Autocomplete to work, I literally copied the example code and it still doesn't work.

The error is in the title. How is this possible...

I'm testing the RadioGroup component and it works fine, but I had some problems, when I wanted to improve the look. Some props I've already fixed by defining the styles, but not all. Probably I can do it, but it requires a huge effort. From my experiences I had problem with replacing props, which are provided by Material-UI:

• hiddenLabel in FormControl
• color in Radio
• labelPlacement in FormControlLabel

Also, I can't change the font size for FormControlLabel component, because it's inherited from Typography component, but I can't access to the mentioned component.
The last problem isn't so important. I'll be glad for help with the first three.

The switch component - and i imagine the other of boolean type components get a warning when the component is inside the Field Array Component.

see below.

Warning: A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components