Repository: directus/directus
File: app/src/interfaces/datetime/datetime.vue (Vue)

Code before:
		<template #activator="{ toggle, active }">
			<VListItem block clickable :disabled :non-editable :active @click="toggle">
				<template v-if="isValidValue">
					<UseDatetime v-slot="{ datetime }" v-bind="$props as UseDatetimeProps">
						{{ datetime }}
					</UseDatetime>
				</template>

				<div class="spacer" />

				<div v-if="!nonEditable" class="item-actions">
					<VRemove v-if="value" :disabled deselect class="clear-icon" @action="unsetValue($event)" />

					<VIcon v-else name="today" class="today-icon" :class="{ active, disabled }" />
				</div>
			</VListItem>
		</template>
		<VDatePicker
			:model-value="value"
			:type
			:use-24
			:include-seconds
			:disabled
			@update:model-value="$emit('input', $event)"
			@close="closeDatePicker"
		/>
	</VMenu>
</template>

<style lang="scss" scoped>
@use '@/styles/mixins';

.v-list-item {
	--v-list-item-color-active: var(--v-list-item-color);
	--v-list-item-background-color-active: var(
		--v-list-item-background-color,
		var(--v-list-background-color, var(--theme--form--field--input--background))
	);

	&.disabled:not(.non-editable) {
		--v-list-item-background-color: var(--theme--form--field--input--background-subdued);
	}

	&.active:not(.disabled),
	&:focus-within,
	&:focus-visible {
		--v-list-item-border-color: var(--v-input-border-color-focus, var(--theme--form--field--input--border-color-focus));
		--v-list-item-border-color-hover: var(--v-list-item-border-color);

		offset: 0;
		box-shadow: var(--theme--form--field--input--box-shadow-focus);

Review comment (suggestion):
Wasn't the issue due to the lack of `ref="dateTimeMenu"` binding?

```ts
const dateTimeMenu = useTemplateRef('dateTimeMenu');
```

With that, previous code seems to fix it, WDYT?

```html
@close="dateTimeMenu?.deactivate()"
```

Code after:
	>
		<template #activator="{ toggle, active }">
			<VListItem block clickable :disabled :non-editable :active @click="toggle">
				<template v-if="isValidValue">
					<UseDatetime v-slot="{ datetime }" v-bind="$props as UseDatetimeProps">
						{{ datetime }}
					</UseDatetime>
				</template>

				<div class="spacer" />

				<div v-if="!nonEditable" class="item-actions">
					<VRemove v-if="value" :disabled deselect class="clear-icon" @action="unsetValue($event)" />

					<VIcon v-else name="today" class="today-icon" :class="{ active, disabled }" />
				</div>
			</VListItem>
		</template>
		<VDatePicker
			:model-value="value"
			:type
			:use-24
			:include-seconds
			:disabled
			@update:model-value="$emit('input', $event)"
			@close="closeDatePicker"
		/>
	</VMenu>
</template>

<style lang="scss" scoped>
@use '@/styles/mixins';

.v-list-item {
	--v-list-item-color-active: var(--v-list-item-color);
	--v-list-item-background-color-active: var(
		--v-list-item-background-color,
		var(--v-list-background-color, var(--theme--form--field--input--background))
	);

	&.disabled:not(.non-editable) {
		--v-list-item-background-color: var(--theme--form--field--input--background-subdued);
	}

	&.active:not(.disabled),
	&:focus-within,
	&:focus-visible {
		--v-list-item-border-color: var(--v-input-border-color-focus, var(--theme--form--field--input--border-color-focus));
		--v-list-item-border-color-hover: var(--v-list-item-border-color);

		offset: 0;