Validation in FormDataConsumer is not updated (taking previous validation) when selected option is updated in SelectInput.
See original GitHub issueWhat you were expecting: I am expecting that validation will change according to the selected value in SelectInput dropdown.
What happened instead: It validates against the previously selected value.
Steps to reproduce:
- Create new comment. Click on Post SelectInput and a dropdown will appear. Select the last post (id = 1).
- In the field right below Post, write ‘abcde’, and we’ll get validation error ‘max 1 char’
- Now go back to Post and select the second last option (id = 2)
- Notice that the validation error is still ‘max 1 char’
- Then, select last post (id = 1) again. Now we’ll get validation error ‘max 2 char’ which is what we’re supposed to get when selected id = 2.
Related code: Code is in PostReferenceInput.js I reproduced this issue in this codesandbox
import * as React from 'react';
import { Field } from 'redux-form';
import { maxLength, required } from 'ra-core';
import {
ReferenceInput,
SelectInput,
FormDataConsumer,
LongTextInput
} from 'react-admin';
import PostQuickCreateButton from './PostQuickCreateButton';
import PostQuickPreviewButton from './PostQuickPreviewButton';
class PostReferenceInput extends React.Component {
constructor(props) {
super(props);
this.renderValue = this.renderValue.bind(this);
this.validate = this.validate.bind(this);
}
validate(type) {
if (type === 1) {
return maxLength(1, 'max 1 char');
} else if (type === 2) {
return maxLength(2, 'max 2 char');
}
}
renderValue() {
return (
<FormDataConsumer>
{({ formData, ...rest }) => {
const type = formData.post_id && formData.post_id;
console.log(type);
return (
<LongTextInput
source="ruleValue"
label={type}
validate={this.validate(type)}
/>
);
}}
</FormDataConsumer>
);
}
render() {
return (
<React.Fragment>
<ReferenceInput {...this.props}>
<SelectInput optionText="id" />
</ReferenceInput>
{this.renderValue()}
<PostQuickCreateButton />
{/* We use Field to get the current value of the `post_id` field */}
<Field
name="post_id"
component={({ input }) =>
input.value && (
<PostQuickPreviewButton id={input.value} />
)
}
/>
</React.Fragment>
);
}
}
export default PostReferenceInput;
Other information:
Environment
- React-admin version: 2.8
- Last version that did not exhibit the issue (if applicable): N/A
- React version: 16.3
- Browser: Chrome
- Stack trace (in case of a JS error):
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:5 (2 by maintainers)
Top Results From Across the Web
How to change TextInput values using FormDataConsumer
I'm having some trouble trying to dynamically change a TextInput value based on another input using FormDataConsumer. I ...
Read more >Input Components - React-admin - Marmelab
Validation rules for the current property. See the Validation Documentation for details. React-admin uses react-hook-form to control form inputs ...
Read more >Examples - Final Form Docs
Introduces a whole-record validation function and demonstrates how to display errors next to fields using child render functions.
Read more >CHANGELOG.md · cygit/react-admin - Gitee.com
... Fix custom user menu does not close after selecting an item in the demo (3868) (fzaninotto); Fix theme can't be changed dynamically...
Read more >10 Validate Select Input with React Hook Form v7 - YouTube
In this video you will learn the beginner approach to using HTML, Tailwindcss and React hooks to build a Select Input field and...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I had same problem. And I prefer If you want to validate between multiple value use allValues field
To circumvent this I am passing
validateOnBlur={true}
to the form, but that messed with myImageInput
validation because it never blurs. I guess it could help you if you don’t have also an image in your form.