Как вы решаете onBlur/onFocus проблему?

Question

[hadaev_ivan]

Вешаешь onBlur/onFocus на элемент и при повторном клике на элемент(ребенка) фокус и блюр срабатывают лишний раз ломая мой выпадающий датапикер Ясное дело что есть другие способы решить задачу но ведь с блюром/фокусом это было бы вроде логичнее

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');
    }

Как вы решаете эту проблему?

Answer 1

[ngreduce]

Попробуйте вешать onFocus/onBlur на input.
Только что проверил в своем приложении и не наблюдаю такого эффекта.

Answer 2

[Артем Кустиков]

Проверяй реальный target ивента, как-нибудь так:
if(event.target.localName != 'input')
return;

https://jsfiddle.net/wxm0087c/