Inner Input Field Loss Focus on Change

[zicodeng]

Consider the following code:

import * as React from 'react';
import { adopt, Mapper, MapProps } from 'react-adopt';
import { Mutation, Query } from 'react-apollo';

import { MY_QUERY, MY_MUTATION } from 'graphql/queries';

interface AdoptRenderProps {
    myQuery: string;
    myMutation: () => void;
}

interface AdoptProps {
    render?: any;
}

export default class Search extends React.Component<
    {},
    {
        token: string;
    }
> {
    state = {
        token: '',
    };

    public render(): JSX.Element {
        const mapper: Mapper<AdoptRenderProps, AdoptProps> = {
            myQuery: ({ render }) => <Query query={MY_QUERY}>{render}</Query>,
            myMutation: ({ render }) => (
                <Mutation mutation={MY_MUTATION}>
                    {(mutation, result) => render({ mutation, result })}
                </Mutation>
            ),
        };

        const mapProps: MapProps<AdoptRenderProps> = ({
            myQuery,
            myMutation,
        }) => ({
            myQuery: myQuery.data,
            myMutation: myMutation.mutation,
        });

        const Composed = adopt(mapper, mapProps);

        return (
            <Composed>
                {({ myQuery, myMutation }) => {
                    const { token } = this.state;
                    return (
                        <form>
                            <input
                                type="text"
                                value={token}
                                onChange={this.handleInputChange}
                            />
                        </form>
                    );
                }}
            </Composed>
        );
    }

    private handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        this.setState({
            token: e.target.value,
        });
    };
}

Input field focus in lost immediately after I type a letter.