Problems with DayPicker Overlay focus and hiding

[zovcharov]

Hi
When I am using day picker with custom input field, there is one problem.
After focusing on DayPickerOverlay, click on any place on the screen calls only onOverlayFocus handler, not onBlur
That`s why after overlay had been focused once I cant close it by click on some other area on the screen.
What can I do for solving this problem?

Thanks

[gitpash]

@zovcharov seems like UX issue, can suggest only workaround like this
you need just createRef on DayPickerInput

ref={inputRef}
dayPickerProps={{
          // other props
          onBlur: () => {
            const activeElement = document.activeElement;
            const overlayContainer = document.getElementsByClassName('DayPickerInput-Overlay');

            if (overlayContainer && !overlayContainer[0].contains(activeElement)) {
              inputRef.current.hideAfterDayClick();
            }
          }
        }}

[Kamilius]

Having same issue.
Downside of workaround proposed by @gitpash is an error inside console:

[zovcharov]

The problem can also be if you have more than one DatePicker on the page. To avoid this issue you can try to create custom ref for each one of the DatePicker instance.

And also you can try something like this.
Create handler for blur event of your DatePickers.

const handlerOnBlur = function() { setTimeout(() => { const elClicked = document.activeElement; const container = document.getElementsByName(props.name); if (container && !container[0].contains(elClicked)) { dayPickerInputRef.hideDayPicker(); } }, 1); };
And after that you can use DatePicker in container:

<div name={props.name}> <DayPickerInput ref={ref => (dayPickerInputRef = ref)} component={InputComp} dayPickerProps={{ input: InputComp, onBlur: handlerOnBlur, }} value={props.date} keepFocus={false} /> </div>

It`s possible to use this way if you have two or more DatePickers on the page.

[Kamilius]

@zovcharov already using similar solution, but there is an issue with relying on onBlur callback. It is being triggered even when clicking first a nextMonth and then - prevMonth buttons or vise versa. Which causes this dropdown to close each time you're trying to return to previously shown month... :(

Btw, instead of relying on onBlur, fixed those issues via writing a custom hook for clickOutside handling, and having no issues with using multiple datepickers now

[Ahmad-Zahid]

@Kamilius can you please share your custom hook solution in detail?