iPhone closeOnSelection triggered by month and year dropdown

[hubert-ix]

When a month or a year is selected, the whole calendar popup gets closed, which makes it impossible to select a date.

This seems to happen only on iPhones, it works fine on Android

[probablykasper]

I don't have an iPhone, so not sure I'll solve this when I can't reproduce it. Would appreciate a PR

[georgeemr]

Hi, the way we fix this issue was doing this change on the onFocusOut event:

function onFocusOut(e: FocusEvent) {
    if (
        e?.currentTarget instanceof HTMLElement &&
        e.relatedTarget &&
        e.relatedTarget instanceof Node &&
        e.currentTarget.contains(e.relatedTarget)
    ) {
        return;
    } else {
        if ($store !== null) {
            visible = false;
        }
    }
}

[akshat-angelone057]

The way we have fixed it is by wrapping the DatePicker component inside a div and attaching a onFocusOut listener on the wrapper div and making visible true if the date is null/undefined

onMount(() => {
		if (/iP(hone|od|ad)/.test(navigator.userAgent) && /Safari/.test(navigator.userAgent)) {
			isIosSafari = true;
		}
	});

	const handleFocusOut = (event: Event) => {
		if (date == null && isIosSafari === true) {
			visible = true;
		}
	};
	
<div class="flex flex-col gap-2" on:focusout={handleFocusOut} {id}>
	<DateInput
		bind:value={date}
		{format}
		{placeholder}
		max={maxDate}
		min={minDate}
		{valid}
		{closeOnSelection}
		bind:visible
	/>
</div>