fix: wrapped button

This somehow weirdly fixes the test. I have no clue why. Regardless it should be better than before, because a button  (DropdownItem) should never contain another interactive element (the setBucketLimit input and save button).

The test failed because I replaced a v-if with v-show. I do not know _why_ this made the test fail. When I reproduced the test step by step it worked for me…

frontend/cypress/e2e/project/project-view-kanban.spec.ts

@@ -116,9 +116,9 @@ describe('Project View Kanban', () => {
 		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
 			.contains('Limit: Not Set')
 			.click()
-		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item .field input.input')
+		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .field input.input')
 			.first()
-			.type(3)
+			.type('3')
 		cy.get('[data-cy="setBucketLimit"]')
 			.first()
 			.click()

frontend/src/components/misc/Dropdown.vue

@@ -2,6 +2,7 @@
 	<div
 		ref="dropdown"
 		class="dropdown"
+		@pointerenter="initialMount = true"
 	>
 		<slot
 			name="trigger"
@@ -22,6 +23,7 @@
 
 		<CustomTransition name="fade">
 			<div
+				v-if="initialMount || open"
 				v-show="open"
 				class="dropdown-menu"
 			>
@@ -49,6 +51,8 @@ defineProps({
 })
 const emit = defineEmits(['close'])
 
+
+const initialMount = ref(false)
 const open = ref(false)
 
 function close() {

frontend/src/components/project/views/ProjectKanban.vue

@@ -71,41 +71,41 @@
 										trigger-icon="ellipsis-v"
 										@close="() => showSetLimitInput = false"
 									>
+
+										<div
+											v-if="showSetLimitInput"
+											class="field has-addons"
+										>
+											<div class="control">
+												<input
+													ref="bucketLimitInputRef"
+													v-focus.always
+													:value="bucket.limit"
+													class="input"
+													type="number"
+													min="0"
+													@keyup.esc="() => showSetLimitInput = false"
+													@keyup.enter="() => {setBucketLimit(bucket.id, true); showSetLimitInput = false}"
+													@input="setBucketLimit(bucket.id)"
+												>
+											</div>
+											<div class="control">
+												<x-button
+													v-cy="'setBucketLimit'"
+													:disabled="bucket.limit < 0"
+													:icon="['far', 'save']"
+													:shadow="false"
+													@click="() => {setBucketLimit(bucket.id, true); showSetLimitInput = false}"
+												/>
+											</div>
+										</div>
 										<DropdownItem
+											v-else
 											@click.stop="showSetLimitInput = true"
 										>
-											<div
+											{{
-												v-if="showSetLimitInput"
+												$t('project.kanban.limit', {limit: bucket.limit > 0 ? bucket.limit : $t('project.kanban.noLimit')})
-												class="field has-addons"
+											}}
-											>
-												<div class="control">
-													<input
-														ref="bucketLimitInputRef"
-														v-focus.always
-														:value="bucket.limit"
-														class="input"
-														type="number"
-														min="0"
-														@keyup.esc="() => showSetLimitInput = false"
-														@keyup.enter="() => {setBucketLimit(bucket.id, true); showSetLimitInput = false}"
-														@input="setBucketLimit(bucket.id)"
-													>
-												</div>
-												<div class="control">
-													<x-button
-														v-cy="'setBucketLimit'"
-														:disabled="bucket.limit < 0"
-														:icon="['far', 'save']"
-														:shadow="false"
-														@click="setBucketLimit(bucket.id, true)"
-													/>
-												</div>
-											</div>
-											<template v-else>
-												{{
-													$t('project.kanban.limit', {limit: bucket.limit > 0 ? bucket.limit : $t('project.kanban.noLimit')})
-												}}
-											</template>
 										</DropdownItem>
 										<DropdownItem
 											v-tooltip="$t('project.kanban.doneBucketHintExtended')"