Manual submit causes page refresh and wrong routing

using enter to submit works fine, but triggering onClick will refresh the page and for some reason tries to access (relative url)?searchSymbol={searchSymbol}. i dont think wad.

import * as React from 'react';
import * as StockActions from '../redux/actions/stock';

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Field, reduxForm, submit } from 'redux-form';
import { RouteComponentProps, withRouter } from 'react-router-dom';
import { RootState } from '../redux/reducers';
import { Row, Load } from '.';

const searchStyle = require('../assets/_searchbutton.css');

export namespace SearchButton {
    export interface Props {
        actions: typeof StockActions
        history: any
        handleSubmit: any
        serachSymbol: string
    }

    export interface State { }
}

class SearchButton extends React.Component<SearchButton.Props, SearchButton.State> {

    renderField = props => (
        <input type={props.type} {...props.input} />
    )

    handleFormSubmit(props) {
        //this.props.history.push(`/stock/${props.searchSymbol}`)
    }

    handleSearchSubmit() {
        (this.refs.searchButtonForm as any).submit()
    }

    render() {
        const { handleSubmit } = this.props;
        return (
            <li className="search-button">
                <form ref="searchButtonForm" onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
                    <Field name='searchSymbol' type='text' placeholder='Symbol' component={this.renderField} />
                    <a onClick={() => {
                        this.handleSearchSubmit()
                        }}>
                        <span className='search-icon' />
                    </a>
                </form>
            </li>
        );
    }
}

function mapStateToProps(state: RootState) {
    return {
    };
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(StockActions as any, dispatch)
    };
}

function validate(values) {
    const errors: { searchSymbol?: string } = {}

    if (!values.searchSymbol || values.searchSymbol.length == 0) {
        errors.searchSymbol = 'symbol may not be empty'
    }

    return errors;
}

export default withRouter(connect<any, any, any>(mapStateToProps, mapDispatchToProps)(reduxForm({ form: 'searchButtonForm', validate })(SearchButton)));

What’s your environment?

6.6.3, firefox, node 6.9.3

[nihiluis]

Because I’m struggling with React and all it’s libraries and I’m not proficient at technical writing at all. I’m pretty happy right now to not have to think about redux-router. You think someone who writes an issue like this would make a good contributor? Plus I wrote this when I spend some hours on redux-form problems again; it may not just be my own opinion, but a biased one as well.

[RyanAtViceSoftware]

totally getting the spirit of OSS there