I'm using react,formik and material-ui to build out an application that I'm trying to add a slider to. For some reason, it appears that the Material-UI slider component is not exposing the name prop to formik which causes formik to through a warning and not use the value from the slider. The warning says that you've called handleChange but not provided id or name
I've created a CodeSandbox that shows the issue I'm having. I managed to find 1 issue on GitHub but Material UII closed it saying that they aren't fixing it and that it has to be handled in userland.
I'm wondering if anyone else has come across this and managed a workaround for it.
I figured it out. Changed the onChange prop from onChange={handleChange} to onChange={(event, value) => setFieldValue('slider', value)}
As for now, it already provides a name attribute.
https://mui.com/material-ui/api/slide/#props
Related
I'm learning how to use MUI's Autocomplete component, and I'm struggling to understand the renderInput prop. I get that it exists to specify how you're going to display the component, but I don't understand how it works. In particular, what is the params object that is passed into the function? What does it contain? How am I supposed to use it?
I've been doing a lot of web searches and have failed to find a good resource to explain this. The documentation's description of the prop is "Render the input", which drives me a little crazy.
Any help elucidating would be very much appreciated. Thank you!
The params contain the props needed for the input element and the container around the input. It allows you to make your own custom input using the functionality provided by MUI.
This is from the MUI docs Autocomplete custom input section.
renderInput={(params) => (
<div ref={params.InputProps.ref}>
<input type="text" {...params.inputProps} />
</div>
)}
You can always check for the params by a simple console.log
I hope you're all well, I'm here with this message to express a concern, a problem that I've encountered. I use autoCompletion from materiall-ui combined with formik in reactjs.
I have trouble filling the autoCompletion field in edit mode, I can't display the exact value in my form so I lose the value of my autoCompletion when I switch from one step to another.
You will have to use initialValue to set value in Autocomplete, formik + materail ui has data binding issues so you can use https://stackworx.github.io/formik-mui/ sample example here https://codesandbox.io/s/formik-material-ui-autocomplete-rishd?file=/index.js:157-169
PS: Please reload sandbox in case of any dependencies error
Is there a way to pass classname to matererial-ui datepicker's dialog.
http://www.material-ui.com/#/components/date-picker
Material-ui's datepicker accepts classname as a prop. But, this gets applied to the text-field upon which we want to trigger the date-dialog.
I want to pass a class attribute to the date-popup itself. Something like:
dialogClassName
The need is I want to access if the click was done somewhere inside the date-dialog and manage some other part of my code based on that. I can't figure out how to make the date-dialog accept a classname.
This issue was a bit boosting,https://github.com/mui-org/material-ui/issues/5329 but passing a dialogClassName doesn't get applied.
There is a solution which I came across by going through the DatePicker Code. You can pass the following props to the DatePicker
<DatePicker>
PopperProps={{
className: classes.desktopView,
}}
DialogProps={{
className: classes.mobileView,
}}
</DatePicker>
I'm afraid you cannot do that without modifying the DatePicket component ( at least not without some wild hacks).
If you really need this functionality you can fork material-ui repository, make the changes and submit a pull request. Or, in you project, create a local DatePicker component and do the changes there, but this approach requires you to update your version in case material-ui's version is updated.
There is no solution as of yet. However there is a workaround to pass a css class name to popup/dialog container.
Pass an img tag for rightArrowIcon props of datepicker with onload function to call its parent and inject css class.
<DatePicker
disableToolbar={true}
variant="inline"
inputVariant="outlined"
rightArrowIcon={<img src="/images/chevron-right_1.svg" id="datepicker-arrow-right" onLoad={injectTheme}/>}
leftArrowIcon={<img src="/images/chevron-right_1.svg" style={{transform:"rotate(180deg)"}}/>}
....
....
....
/>
const injectTheme=()=>{
let node = document.getElementById("datepicker-arrow-right").parentNode.parentNode.parentNode.parentNode.parentNode.parentElement;
node.classList.add("Css-Class-Name");
}
I'm using a react datepicker component that can be found here. The component is pretty great except for what appears to be an oversight: it does not implement willReceiveProps.
To expound, I create the datpicker as below:
<DateField
dateFormat= { dateFormat}
forceValidDate={true}
defaultValue={startDate || ''}
onChange={this.handleChange.bind(null, 'start_date')}
id="start"
>
<DatePicker
navigation={true}
locale="en"
forceValidDate={true}
highlightWeekends={true}
highlightToday={true}
weekNumbers={true}
weekStartDay={0}
/>
</DateField>
Note above that there is a prop defaultValue which I pass startDate. Now, startDate can and does change for reasons that are sometimes external to the component. That value is passed during a new render() action as per usual. According to react philosophy this shouldn't be a problem.
However, it appears to me as if the value from defaultValue is only ever read once inside DateField. It is read as this.props.defaultValue. Anyone who has ever built a component relying on props should quickly recognize this is a problem. It means that when the prop is changed the new value will not be used.
Because this is a library, I cannot simply implement willReceiveProps. Does anyone know of a good workaround to get this component to either completely reset on a render or some other strategy to deal with what seems to be a big design problem?
They follow the same standards as the <input> component. defaultValue is read only once but there is also value that can be set externally. There is no need for them to use willReceiveProps.
In short, use value instead of defaultValue.
See Uncontrolled Components in React
PS: I am looking a bit into the code and it seems there are also properties text and date apart from value. Since the code (and documentation) has been removed from github, I won't inspect what is the difference between those props.
Some material-ui components have errorText as a prop which we can use to show errors, But, doing that in react become lot complex if my form has large number of field components.
Please suggest the best way to handle client-side validation with material-ui comonents.
I think your issue is that you have to manage a lot with state/store. In react validation is complex because of one-way binding.
This library https://github.com/vishalvisd/react-validator is one which I found that supports material-ui component validation. Though in general you may use this to validate any component.
I would suggest using some HoC (Higher-order Component) approach. I tested many solutions for form validation in React JS, the one that I always choose is: react-validation-mixin. Take a look at this example.
Example of the standard input:
<input
type='text'
placeholder='Username'
value={this.props.username}
onChange={this.onChange('username')}
onBlur={this.props.handleValidation('username')}
/>
In this example value of that input comes from props (example with Flux implementation) and that's probably what you aim for too (lots of inputs).
onChange will need to handle value change so that this.props.username gets updated too and onBlur will trigger validation check (so that the error will show up once user leaves the input).
In order to get the error message, use: this.props.getValidationMessages('username')
It's a universal solution and you can use it in different libs. But taking TextField from material-ui, as you asked:
<TextField
floatingLabelText="Username"
value={this.props.username}
errorText={this.props.getValidationMessages('username')}
onChange={this.onChange('username')}
onBlur={this.props.handleValidation('username')}
...
/>
Remember to use HoC with your component: export default validation(strategy)(UserLogin) That way, you will get all the necessary helper methods in props.
If you are using Redux in React project, redux-form give you a simple way to implement form validation.
Check this out: http://redux-form.com/6.4.3/examples/syncValidation/