NcSelect Timezone picker breaks on Firefox when using with NcPopover

[miaulalala]

Since the component uses a manual z-index, the component looks like this on Firefox when using it together with the NcPopover

nextcloud/calendar#5606

[susnux]

It does not have any custom stylings so this is caused by NcSelect which is used under the hood.

[susnux]

@miaulalala are you sure you mounted the popover correctly?
Because something like this works

<template>
	<div style="display: flex">
		<NcPopover>
			<template #trigger>
				<NcButton>I am the trigger</NcButton>
			</template>
			<template>
				<form tabindex="0" @submit.prevent>
					<NcPopover>
						<template #trigger>
							<NcButton>I am the second trigger</NcButton>
						</template>
						<template>
							<NcTimezonePicker />
						</template>
					</NcPopover>
					<h2>this is some content</h2>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>
						Vestibulum eget placerat velit.
					</p>
					<label>
						Label element
						<input type="text" placeholder="input element"/>
					</label>
				</form>
			</template>
		</NcPopover>
	</div>
</template>

No adjustments needed, so I guess one of your popovers is bound to a HTML element below the current popover. Are you nesting them and bind both to the body instead the second one to the first?

[miaulalala]

The code is here: https://github.com/nextcloud/calendar/blob/baeeae244614586bbc3c1efd3233f26a84ec0a01/src/components/Shared/DatePicker.vue#L63

[st3iny]

That seems to be it. Thanks again @susnux ❤️