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>