getValue() and Controlled 3rd party components

[timothyallan]

Hi there,

I'm using the Material UI TextField component as a drop in replacement for your React Select demo and giving your library a spin. Few things that popped up that aren't necessarily anything to do with your library, but may be worthwhile thinking about :)

Here's the code:

import React from 'react'
import { FormInput } from 'react-form'
import TextField from 'material-ui/TextField';
export default ({ field, ...rest }) => {
  return (
    <FormInput field={field}>
      {({ setValue, getValue, setTouched }) => {
        return (
          <TextField
            {...rest} // Send the rest of your props to React-Select
            value={getValue() || ''} // Set the value to the forms value
            onChange={val => setValue(val.target.value) } // On Change, update the form value
            onBlur={() => setTouched()} // And the same goes for touched
            name="testext"
          />
        );
      }}
    </FormInput>
  );
}

Now, Material UI returns the event object in val. That caused an infinite loop in your removeNestedErrorValues function trying to parse that Object in return recurse(d, [].concat(_toConsumableArray(path), [i]));

Easily fixed once I figured out wtf was going on, but still, an infinite loop when passed bad data.

Secondly, I'm assuming getValue() returns undefined/null when there's no value. This causes the ol TextField is changing an uncontrolled input of type text to be controlled. error as soon as some text is entered.

Again easily fixed by the tweak above, but I'm wondering if getValue() should return '' rather than null.

Thoughts?

[tannerlinsley]

The first problem is a small edge case o can handle when I jump back into the code good find. For controlled components that complain, use the default value parameter for getValue. Eg getValue(field, '') That should stop react from barking at undefined values.

…

On Tue, Dec 20, 2016 at 12:10 AM Tim ***@***.***> wrote: Hi there, I'm using the Material UI TextField component as a drop in replacement for your React Select demo and giving your library a spin. Few things that popped up that aren't necessarily anything to do with your library, but may be worthwhile thinking about :) Here's the code: import React from 'react' import { FormInput } from 'react-form' import TextField from 'material-ui/TextField'; export default ({ field, ...rest }) => { return ( <FormInput field={field}> {({ setValue, getValue, setTouched }) => { return ( <TextField {...rest} // Send the rest of your props to React-Select value={getValue() | ''} // Set the value to the forms value onChange={val => setValue(val.target.value) } // On Change, update the form value onBlur={() => setTouched()} // And the same goes for touched name="testext" /> ); }} </FormInput> ); } Now, Material UI returns the event object in val. That caused an infinite loop in your removeNestedErrorValues function trying to parse that Object in return recurse(d, [].concat(_toConsumableArray(path), [i])); Easily fixed once I figured out wtf was going on, but still, an infinite loop when passed bad data. Secondly, I'm assuming getValue() returns undefined/null when there's no value. This causes the ol TextField is changing an uncontrolled input of type text to be controlled. error as soon as some text is entered. Again easily fixed by the tweak above, but I'm wondering if getValue() should return '' rather than null. Thoughts? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#13>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFUmCUG2M8BE11BBrDKMqYMoSf-y4tWPks5rJ39NgaJpZM4LRiA6> .

[timothyallan]

Missed the default value param. Thanks!