Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

with react final-form why is meta.touched always false with third party components?

using final-form, i have a third party input component. i've written an adapter for it. it has a validator as well, but meta.touched is always false. i've tried propagating the onFocus event up to the input, but no luck. what am i doing wrong?

const requiredValidator = value => (value ? undefined : 'is required');

const FloatingLabelInputAdapter = ({ input, meta, ...rest }) => (
  <FloatingLabelInput
    {...rest}
    onChange={(event) => input.onChange(event)}
    onFocus={(event) => input.onFocus(event)}
    errorText={meta.touched ? meta.error : ''}
  />
)

// used like this:

<Field
  component={FloatingLabelInputAdapter}
  label="Email"
  name="email"
  type="text"
  validate={requiredValidator}
/>

// and here's the render() of the component


  render() {
    const { children, label } = this.props;
    const { focussing, used } = this.state;

    console.log('FloatingLabelInput.props', this.props);

    return (
      <Group {...this.props} >
        <TextInput
          focussing={focussing}
          innerRef={(comp) => { this.input = comp }}
          onFocus={this.onFocusHandle}
          onBlur={this.onBlurHandle}
          onChange={this.onChange}
          type={this.props.type} />

        <Label
          focussing={focussing}
          used={used}>

          {label}
        </Label>

        <Bar focussing={focussing} />
      </Group>
    );
  }
}
like image 948
Adam Krawesky Avatar asked Aug 09 '18 22:08

Adam Krawesky


People also ask

How does React Final Form work?

In React Final Form, the Form component takes the subscription prop, which implements the observer design pattern and causes fewer renders. The subscription prop is similar to the useEffect Hook because it watches the values that have been passed to it and re-renders whenever they are changed.

What is pristine in React Final Form?

pristine. true if the form values are the same as the initial values.

How to validate form data in React?

Form validation in React allows an error message to be displayed if the user has not correctly filled out the form with the expected type of input. There are several ways to validate forms in React; however, this shot will focus on creating a validator function with validation rules.

What is FormSpy in react?

<FormSpy/> import { FormSpy } from 'react-final-form' A component that subscribes to form state, and injects both form state and the form instance via a render prop. The <FormSpy/> will rerender any time the form state it is subscribed to changes. By default it subscribes to all form state.


1 Answers

annnnd as usual i answer my own question.

i had to propagate the onBlur() event as well, which makes sense since touched docs say it's true only after user has entered and left focus on the input.

<FloatingLabelInput
   ...
   onBlur={(event) => input.onBlur(event)}
/>
like image 182
Adam Krawesky Avatar answered Oct 02 '22 20:10

Adam Krawesky