question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Validation in FormDataConsumer is not updated (taking previous validation) when selected option is updated in SelectInput.

See original GitHub issue

What 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:

  1. Create new comment. Click on Post SelectInput and a dropdown will appear. Select the last post (id = 1).
  2. In the field right below Post, write ‘abcde’, and we’ll get validation error ‘max 1 char’
  3. Now go back to Post and select the second last option (id = 2)
  4. Notice that the validation error is still ‘max 1 char’
  5. 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:open
  • Created 4 years ago
  • Reactions:1
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
duongthaicuongcommented, Feb 25, 2022

I had same problem. And I prefer If you want to validate between multiple value use allValues field

validate={[
        required(),
        minValue(),
        ...
        anyCustom,
]}

//value: value of current input
//allValues : all values of current form
const anyCustom = (value, allValues) => {
    if (...) {
     return errorMessage : string
    }
    return undefined
}
0reactions
Rawphscommented, Jun 24, 2020

To circumvent this I am passing validateOnBlur={true} to the form, but that messed with my ImageInput validation because it never blurs. I guess it could help you if you don’t have also an image in your form.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found