-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Select onChange target doesn't return an html tag #8460
Comments
How about reproducing with the codesandbox link than was in the issue template? |
@rosskevin This time, the provided information is enough to look into the issue.
@robininfo-edsx The event is coming from a click/key interaction as you can find in: You won't be able to access the hidden input field this way. This is not something we want to support. But then, I don't understand the use case as you are the one providing a name to the input. Anyway, you can use the P.S. With the native version of the Select component, you can use the event to access the native select input field. |
I do as React documentation does because if you use something like this const setData = (name) => (e) => console.log(e.target)
export const MySelect = () => (
<FormControl fullWidth>
<InputLabel htmlFor="age-simple">Civilité</InputLabel>
<Select
value={'Monsieur'}
onChange={setData(civility)}
input={<Input />}
label={'Civilité'}
>
<MenuItem value={'Mr'}>Monsieur</MenuItem>
<MenuItem value={'Mme'}>Madame</MenuItem>
</Select>
</FormControl>
) You create a function each time you rerender this Component, so using a depth 1 shallow comparison will return you to rerender each time. |
I've been using the Formik library recently https://github.com/jaredpalmer/formik and it throws this warning:
Since Unless I'm missing something, using native selects is the only way around this? |
@mgrijalva You are right. Formik uses the following logic. I'm curious about the integration with other form libraries. Still, you have an alternative on userland, you can write an adapter between Material-UI I'm adding the So far we have:
I have been looking at what Ant Design is doing with their custom select. They don't even expose the |
@oliviertassinari I am struggling through Formik issues as well. When you say:
What would an adapter look like in this scenario? |
I just started playing with formik using material-ui components today. so far, it seems like you may need to write some wrapper components to integrate formik e.g., using render property on formik not sure if the most elegant way, but seems to be working. |
oh, i saw that you can manipulate |
Hi @burcakulug, have you a running example of a solution that I could use for my project ? I struggle with this warning :-( |
Hi @jfperrin , I have started this personal fun project, you can take a look at this as a sample. For my actual work project, I implemented some wrapper components using Formik's Field and Material UI components, if that project gets opensource, I can also post it here later. For now, the one above should give you the gist. |
Hi, i'm also struggling with this warning when using Formik with the Material-ui SelectField. So i think it is enough for the devs to implement something better to resolve this issue. |
i think a library wrapping mui components and bridging formik field to them would be good. that's what i sort of did for work, if i can manage, i may try to create a library for it. |
I'm having the same issue. |
I wrapped this for our team - it only took a few minutes. |
Here's an example for the TextField component: import React from "react";
import PropTypes from "prop-types";
import { TextField } from "material-ui";
const MaterialInput = ({
field,
form: { touched, errors },
label,
...props
}) => (
<TextField
{...props}
{...field}
value={field.value || ""}
error={Boolean(touched[field.name] && errors[field.name])}
label={(touched[field.name] && errors[field.name]) || label}
/>
);
MaterialInput.propTypes = {
field: PropTypes.shape({
name: PropTypes.string,
value: PropTypes.any,
onChange: PropTypes.func,
onBlur: PropTypes.func
}).isRequired,
form: PropTypes.shape({
touched: PropTypes.object,
errors: PropTypes.object
// the rest of the formik bag too
}).isRequired,
label: PropTypes.string.isRequired
};
export default MaterialInput; Here's an example with Selects: import React from "react";
import PropTypes from "prop-types";
import { TextField } from "material-ui";
const MaterialInputSelect = ({
field,
form: { touched, errors },
label,
options,
...props
}) => (
<TextField
{...props}
{...field}
value={field.value || ""}
error={Boolean(touched[field.name] && errors[field.name])}
label={(touched[field.name] && errors[field.name]) || label}
select
SelectProps={{ native: true }}
>
<option value="">Select</option>
{options.map(option => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</TextField>
);
MaterialInputSelect.propTypes = {
field: PropTypes.shape({
name: PropTypes.string,
value: PropTypes.any,
onChange: PropTypes.func,
onBlur: PropTypes.func
}).isRequired,
form: PropTypes.shape({
touched: PropTypes.object,
errors: PropTypes.object
// the rest of the formik bag too
}).isRequired,
label: PropTypes.string.isRequired,
options: PropTypes.arrayOf(
PropTypes.shape({
value: PropTypes.any,
label: PropTypes.string
})
)
};
MaterialInputSelect.defaultProps = {
options: []
};
export default MaterialInputSelect; And here's an example with Switches: import React from "react";
import PropTypes from "prop-types";
import { FormControlLabel, Switch } from "material-ui";
const MaterialInput = ({
field: { value, ...field },
form,
label,
...props
}) => (
<FormControlLabel
control={<Switch {...field} {...props} checked={value || false} />}
label={label}
/>
);
MaterialInput.propTypes = {
field: PropTypes.shape({
name: PropTypes.string,
value: PropTypes.any,
onChange: PropTypes.func,
onBlur: PropTypes.func
}).isRequired,
form: PropTypes.shape({
// the formik bag
}).isRequired,
label: PropTypes.string.isRequired
};
export default MaterialInput; |
Chiming in late for anyone also struggling with this, since I'm using MUI with Formik as well, but wanted the non-native Select. It seems you can achieve it by passing an ID down to the visible element that matches the form field name, like so: <TextField
name="mySelectField"
label="Select something ..."
select
required
value={values.mySelectField}
SelectProps={{
SelectDisplayProps: {
id: 'mySelectField'
}
}}
onChange={handleChange}
onBlur={handleBlur}
>
{mySelectOptions.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField> |
FYI, this last snippet seems like MUI v1.x |
Expected Behavior
Get the input html tag under select
Current Behavior
Get only an object with value field
Steps to Reproduce (for bugs)
Try to render MySelect from
Context
I need to get the name field of my Select
However this one is not present in the triggered event
Your Environment
Ubuntu 17.04 (64bit)
The text was updated successfully, but these errors were encountered: