Using react-bootstrap with React-Form

am trying to use “redux-form”: “^6.7.0” with “react-bootstrap”: “^0.31.0”

I have added the Field to the form as follows:

    class Config extends Component {
        render() {
            const { ServerPort, UserID, PortNumber, WWWUrl, SourcePath, FMEPath, pickFile, pickFolder, handleSubmit } = this.props;
            return (
                <Form horizontal onSubmit={handleSubmit}>
                    <FormGroup controlId="serverPortBox">
                        <Col componentClass={ControlLabel} sm={2}>Watson Port:</Col>
                        <Col sm={10}>
                            <OverlayTrigger placement="left" overlay={(<Tooltip id="tt1">TCP port for Watson to use</Tooltip>)}>
                                <Field name="WatsonPort" component={FormControl}
                                    type="number" min="1024" max="65535" placeholder={ServerPort} />
                            </OverlayTrigger>
                        </Col>
                    </FormGroup>

but I am getting the warning:

    Warning: Unknown props `input`, `meta` on <input> tag. Remove these props from the element. 
        in input (created by FormControl)
        in FormControl (created by ConnectedField)
        in ConnectedField (created by Connect(ConnectedField))
        in Connect(ConnectedField) (created by Field)

If I change the Field to not use an JS Object for the component, I do not get the warning, but I also do not see the FormControl appearing.

    <Field name="WatsonPort" component="FormControl" type="number" min="1024" max="65535" placeholder={ServerPort} />

[DrYSG]

Oh, this is a great mystery. I followed the advice in https://github.com/react-bootstrap/react-bootstrap/issues/2210 and both the warning about additional props and the empty submit stopped.

And it seems you have to wrap the Bootstrap in your custom component (why?) , except for one odd thing. When the mouse enters the field the first time, and the field gets selected, then I can press one key, and then field looses the selected state. If I reselect, and continue typing it works fine. It is only the first key press that causes the loss of “selected” or is it focus?

Update and then I tried converting the component to a stateless functional component, and moved the FieldInput of there, and put it in as an independent SFC. And now it select and focus work fine.

Go figure.

        const FieldInput = ({ input, meta, type, placeholder, min, max }) => {
            return (
                <FormControl
                    type={type}
                    placeholder={placeholder}
                    min={min}
                    max={max}
                    value={input.value}
                    onChange={input.onChange} />
            )
        }

and I invoke it like this:

<Field name="ServerPort" type='number' component={FieldInput} placeholder={ServerPort} min="1024" max="65535" />

see also: https://github.com/erikras/redux-form/issues/1750

So now, the definition of FieldInput and Config look like this:

import React, { Component } from 'react'
import { Field, reduxForm } from 'redux-form'
import { connect } from 'react-redux'
import { Form, FormControl, FormGroup, ControlLabel, Col, Button, Tooltip, OverlayTrigger } from 'react-bootstrap'
import * as Act from '../dash/actions.js'
import FaFolderOpen from 'react-icons/lib/fa/folder-open'
import FaFileCodeO from 'react-icons/lib/fa/file-code-o'

const FieldInput = ({ input, meta, type, placeholder, min, max }) => {
    return (
        <FormControl
            type={type}
            placeholder={placeholder}
            min={min}
            max={max}
            value={input.value}
            onChange={input.onChange} />
    )
}

const Config = ({ ServerPort, UserID, PortNumber, WWWUrl, SourcePath, FMEPath, pickFile, pickFolder, handleSubmit }) => {
    return (
        <Form horizontal onSubmit={handleSubmit}>
            <FormGroup controlId="serverPortBox">
                <Col componentClass={ControlLabel} sm={2}>Watson Port:</Col>
                <Col sm={10}>
                    <OverlayTrigger placement="left" overlay={(<Tooltip id="tt1">TCP port for Watson to use</Tooltip>)}>
                        <Field name="ServerPort" type='number' min="1024" max="65535" component={FieldInput} placeholder={ServerPort}  />
                    </OverlayTrigger>
                </Col>
            </FormGroup>

[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.