import React from 'react';
import PropTypes from 'prop-types';
import {
    Well, InputGroup, FormControl, Button, Glyphicon
} from 'react-bootstrap';


class SearchPostsWell extends React.Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(e) {
        e.preventDefault();
        if (this.props.onSubmit) {
            const q = this.q.value.trim();

            if (q) {
                this.props.onSubmit(q);
            }
        }
    }

    render() {
        const {q, pending} = this.props;

        return (
            <Well>
                <h4>Blog Search</h4>
                <form autoComplete="off" onSubmit={this.handleSubmit}>
                    <InputGroup>
                        <FormControl inputRef={ ref => {
                            this.q = ref;
                        }}
                        defaultValue={q} />
                        <InputGroup.Button>
                            <Button disabled={pending}>
                                <Glyphicon glyph="search" />
                            </Button>
                        </InputGroup.Button>
                    </InputGroup>
                </form>
            </Well>
        );
    }
}

SearchPostsWell.propTypes = {
    q: PropTypes.string,
    pending: PropTypes.bool,
    onSubmit: PropTypes.func
};

export default SearchPostsWell;
import React from 'react';
import PropTypes from 'prop-types';
import {
    Well, InputGroup, FormControl, Button, Glyphicon
} from 'react-bootstrap';


class SearchPostsWell extends React.Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(e) {
        e.preventDefault();
        if (this.props.onSubmit) {
            const q = this.q.value.trim();

            if (q) {
                this.props.onSubmit(q);
            }
        }
    }

    render() {
        const {q, pending} = this.props;

        return (
            <Well>
                <h4>Blog Search</h4>
                <form autoComplete="off" onSubmit={this.handleSubmit}>
                    <InputGroup>
                        <FormControl inputRef={ ref => {
                            this.q = ref;
                        }}
                        defaultValue={q} />
                        <InputGroup.Button>
                            <Button disabled={pending} type="submit">
                                <Glyphicon glyph="search" />
                            </Button>
                        </InputGroup.Button>
                    </InputGroup>
                </form>
            </Well>
        );
    }
}

SearchPostsWell.propTypes = {
    q: PropTypes.string,
    pending: PropTypes.bool,
    onSubmit: PropTypes.func
};

export default SearchPostsWell;

Use submit button type in search posts well.
Use submit button type in search posts well.
