How do you solve the onBlur/onFocus problem?

Question

JavaScript

You hang onBlur / onFocus on the element and when you click on the element (child) again, the focus and blur work once again breaking my drop-down datepicker It's clear that there are other ways to solve the problem, but with blur / focus it would seem more logical

render: function () {
        var component = this;
        var props = component.props;
        var state = component.state;

        return (
            <div>
                <label onFocus={component.onOpenDateRangePicker} onBlur={component.onCloseDateRangePicker}>
                    <input
                        className="date-range-picker-input"
                        value={component.state.value}/>

                    <div className={classNames('date-picker-wrapper', {hidden: !state.isOpened})}>
                        <DateRangePicker />
                    </div>
                </label>
            </div>
        );
    },
    onOpenDateRangePicker: function (event) {
        var component = this;
        debugger;

        component.setState({
            isOpened: true
        });
        console.log('focus');
    },
    onCloseDateRangePicker: function (event) {
        var component = this;
        debugger;
        component.setState({
            isOpened: false
        });
        console.log('blur');
    }

How do you solve this problem?

Answer 1

Try putting onFocus/onBlur on input.
I just checked in my application and I do not observe such an effect.

Answer 2

Check the real target of the event, something like this:
if(event.target.localName != 'input')
return;
https://jsfiddle.net/wxm0087c/