How to execute onBlur only if I click out of the component?

Question

I have a component that has form with input and dropdown. I want to dispatch an action with onBlur event, but it works not as I supposed - so if I click on dropdown component, blur will execute. How do I deal with it - get onBlur action only if I click out of the component that has onBlur event handler?

Component

import React, { Component } from 'react';
import FoundedIngredient from './FoundedIngredient';
import { connect } from 'react-redux';
import { actionFindIngredients, actionClearFoundIngredients } from '../actions/actionCreators';

class FoundedIngredients extends Component {
    render() {
        const { foundIngredients } = this.props.aside;
        const { actionFindIngredients, actionClearFoundIngredients } = this.props;
        const isEmpty = foundIngredients.length > 0;
        const list = foundIngredients.map(({ id, img, name }, key) => {
            return (
                <FoundedIngredient
                    key={`ingr-${key}`}
                    id={id}
                    img={img}
                    name={name}
                >
                </FoundedIngredient>
            )
        });
        return (
            <div className="form">
                <form
                    onBlur={() => actionClearFoundIngredients()}
                >
                    <div className="input-wraper">
                        <input
                            type="text"
                            placeholder="Beer, lime or smth..."
                            onChange={(e) => actionFindIngredients(e.target.value)}
                            onFocus={(e) => actionFindIngredients(e.target.value)}
                        />
                    </div>
                    {
                        isEmpty &&
                        <div className="drop">
                            <div className="block">
                                {list}
                            </div>
                        </div>
                    }
                </form>
            </div>
        );
    }
}

export default connect(state => ({
    aside: state.aside
}), { actionFindIngredients, actionClearFoundIngredients })(FoundedIngredients)