React-final-form: [React Native] Error on submitting the form - event.preventDefault() is not a function

[ghoshabhi]

Are you submitting a bug report or a feature request?

Bug Report - similar to #83

What is the current behavior?

I have a form like so:

export default class extends Component<any> {
  displayName = 'MyForm';
  render() {
    return (
      <Form
        onSubmit={this.props.onSubmit}
        render={({ handleSubmit, values }) => (
          <View>
            <RowView // styled-component
              style={{ ... }}
            >
              <Text style={{ fontSize: 16, fontWeight: 'bold' }}>Label:</Text>
              <Field
                component={() => (
                  <TextInput
                    placeholder={'$00.00'}
                    keyboardType="numeric"
                    style={styles.textInput}
                  />
                )}
              />
            </RowView>
            <TouchableOpacity onPress={() => handleSubmit(values)}>
              <Text>Submit</Text>
            </TouchableOpacity>
          </View>
        )}
      />
    );
  }
}

Which I then use in a container:

class MyContainer extends Component {
  handleOnSubmit = (values) => {
   alert(JSON.stringify(values));
  };

  render() {
    return (
      <KeyboardAvoidingView style={styles.container}>
        <MyForm onSubmit={this.handleOnSubmit} />
      </KeyboardAvoidingView>
    );
  }
}

Unfortunately this throws an error when I try to submit the form, with the same error as mentioned in #83.

What is the expected behavior?

Should submit form without any errors regarding the event object.

Sandbox Link

https://snack.expo.io/r1Dj7J6vM || https://snack.expo.io/S1IY_JawG

What's your environment?

"react": "16.0.0-beta.5",
"react-final-form": "^3.1.0",
"react-native": "0.49.3",

Other information

I see that error is coming from this function over here:

 _this.handleSubmit = function (event) {
      event && event.preventDefault();
      // console.log('event: ', JSON.stringify(event));
      return _this.form.submit();
    };

---

I am not really sure if I am doing anything wrong or using any of the components from the library wrongly.

[ghoshabhi]

Even though I see this issue was fixed and shipped with v2.2.0 - I am not sure why I am getting this issue then. I am sorry, if I am missing something very obvious.

[erikras]

The line in question is: event && event.preventDefault().

In order for you to get that error, event must be truthy, but event.preventDefault not be a function. Perhaps it needs to be event && event.preventDefault && event.preventDefault()?

[ghoshabhi]

Is this published ? I tried to remove both the packages (final-form and react-final-form), but still see the same error.

On a side note, I can submit the form now - but I cannot get the values from the Form component ? Unlike redux-form this package doesn't need any hooking up with the reducers right ?

[erikras]

Not yet.

[erikras]

Published fix in v3.1.1.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.