BC-7631 - Keyboard does not open when tapping on column or board title (#3504)

* Board: fix bug that does not open keyboard, change readonly to disabled
* Board-ColumnTitle: 
   * make board menu be a sibling not a child, remove not needed slot, remove negative margins from column title
* fix column- & card- touch events on sensitive touch displays
* fix cursor for chips in board header
* remove not needed touch detection

Author: NFriedo

src/modules/feature/board/board/Board.vue

@@ -32,7 +32,10 @@
 								direction: 'horizontal',
 								disabled: isEditMode || !hasMovePermission,
 								group: 'columns',
-								delay: isTouchDetected ? 300 : 0,
+								delayOnTouchOnly: true,
+								delay: 300,
+								touchStartThreshold: 3, // needed for sensitive touch devices
+								fallbackTolerance: 3, // specifies how far the mouse should move before it's considered a drag
 								ghostClass: 'sortable-drag-ghost',
 								easing: 'cubic-bezier(1, 0, 0, 1)',
 								dragClass: 'sortable-drag-board-card',
@@ -136,7 +139,6 @@ import {
 	useBoardNotifier,
 	useSharedEditMode,
 } from "@util-board";
-import { useTouchDetection } from "@util-device-detection";
 import { useDebounceFn } from "@vueuse/core";
 import { SortableEvent } from "sortablejs";
 import { Sortable } from "sortablejs-vue3";
@@ -191,7 +193,6 @@ watch(
 );
 
 useBodyScrolling();
-const { isTouchDetected } = useTouchDetection();
 
 const {
 	hasMovePermission,

src/modules/feature/board/board/BoardColumn.vue

@@ -13,7 +13,6 @@
 			@move:column-right="onMoveColumnRight"
 			@move:column-up="onMoveColumnUp"
 			@update:title="onUpdateTitle"
-			:class="{ 'pl-2': !isListBoard }"
 		/>
 		<div>
 			<Sortable
@@ -25,7 +24,10 @@
 					animation: 250,
 					bubbleScroll: true,
 					direction: 'vertical',
-					delay: isTouchDetected ? 300 : 2,
+					delayOnTouchOnly: true,
+					delay: 300,
+					touchStartThreshold: 3, // needed for sensitive touch devices
+					fallbackTolerance: 3, // specifies how far the mouse should move before it's considered a drag
 					disabled: !hasMovePermission,
 					dragClass: 'elevation-10',
 					dragoverBubble: false,
@@ -83,10 +85,8 @@ import {
 	useForceRender,
 } from "@data-board";
 import { extractDataAttribute, useDragAndDrop } from "@util-board";
-import { useTouchDetection } from "@util-device-detection";
 import { useDebounceFn } from "@vueuse/core";
 import { SortableEvent } from "sortablejs";
-
 import { Sortable } from "sortablejs-vue3";
 import { computed, defineComponent, PropType, ref, toRef } from "vue";
 import CardHost from "../card/CardHost.vue";
@@ -153,7 +153,6 @@ export default defineComponent({
 		});
 
 		const { isDragging, dragStart, dragEnd } = useDragAndDrop();
-		const { isTouchDetected } = useTouchDetection();
 		const showAddButton = computed(
 			() => hasCreateColumnPermission && isDragging.value === false
 		);
@@ -317,7 +316,6 @@ export default defineComponent({
 			hasCreateColumnPermission,
 			hasMovePermission,
 			isDragging,
-			isTouchDetected,
 			isNotFirstColumn,
 			isNotLastColumn,
 			sortableClasses,

src/modules/feature/board/board/BoardColumnHeader.vue

@@ -1,13 +1,13 @@
 <template>
-	<BoardColumnInteractionHandler
-		:isEditMode="isEditMode"
-		@start-edit-mode="onStartEditMode"
-		@end-edit-mode="onEndEditMode"
-		@move:column-keyboard="onMoveColumnKeyboard"
-		:id="columnId"
-	>
-		<div class="column-header mb-4 rounded" ref="columnHeader">
-			<div class="d-flex align-center py-2 pr-4 pl-2">
+	<div class="d-flex flex-wrap mb-4 mt-2" ref="columnHeader">
+		<div class="flex-1-0">
+			<BoardColumnInteractionHandler
+				:isEditMode="isEditMode"
+				@start-edit-mode="onStartEditMode"
+				@end-edit-mode="onEndEditMode"
+				@move:column-keyboard="onMoveColumnKeyboard"
+				:id="columnId"
+			>
 				<BoardAnyTitleInput
 					:value="title.trim()"
 					:data-testid="`column-title-${index}`"
@@ -18,47 +18,45 @@
 					:isFocused="isFocusedById"
 					@update:value="onUpdateTitle"
 					@blur="onEndEditMode"
-				>
-					<BoardMenu
-						v-if="hasDeletePermission"
-						:scope="BoardMenuScope.COLUMN"
-						:data-testid="`column-menu-btn-${index}`"
-					>
-						<KebabMenuActionRename
-							v-if="!isEditMode"
-							@click="onStartEditMode"
-						/>
-						<template v-if="isListBoard">
-							<KebabMenuActionMoveUp
-								v-if="isNotFirstColumn"
-								@click="onMoveColumnUp"
-							/>
-							<KebabMenuActionMoveDown
-								v-if="isNotLastColumn"
-								@click="onMoveColumnDown"
-							/>
-						</template>
-						<template v-else>
-							<KebabMenuActionMoveLeft
-								v-if="isNotFirstColumn"
-								@click="onMoveColumnLeft"
-							/>
-							<KebabMenuActionMoveRight
-								v-if="isNotLastColumn"
-								@click="onMoveColumnRight"
-							/>
-						</template>
-						<KebabMenuActionDelete
-							:name="title"
-							:scope="BoardMenuScope.COLUMN"
-							@click="onDelete"
-						/>
-					</BoardMenu>
-				</BoardAnyTitleInput>
-			</div>
-			<VDivider aria-hidden="true" class="border-opacity-75" />
+				/>
+			</BoardColumnInteractionHandler>
 		</div>
-	</BoardColumnInteractionHandler>
+		<div class="mt-2 mr-3">
+			<BoardMenu
+				v-if="hasDeletePermission"
+				:scope="BoardMenuScope.COLUMN"
+				:data-testid="`column-menu-btn-${index}`"
+			>
+				<KebabMenuActionRename v-if="!isEditMode" @click="onStartEditMode" />
+				<template v-if="isListBoard">
+					<KebabMenuActionMoveUp
+						v-if="isNotFirstColumn"
+						@click="onMoveColumnUp"
+					/>
+					<KebabMenuActionMoveDown
+						v-if="isNotLastColumn"
+						@click="onMoveColumnDown"
+					/>
+				</template>
+				<template v-else>
+					<KebabMenuActionMoveLeft
+						v-if="isNotFirstColumn"
+						@click="onMoveColumnLeft"
+					/>
+					<KebabMenuActionMoveRight
+						v-if="isNotLastColumn"
+						@click="onMoveColumnRight"
+					/>
+				</template>
+				<KebabMenuActionDelete
+					:name="title"
+					:scope="BoardMenuScope.COLUMN"
+					@click="onDelete"
+				/>
+			</BoardMenu>
+		</div>
+		<VDivider role="presentation" class="flex-1-0-100 border-opacity-75" />
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -152,8 +150,3 @@ const onMoveColumnUp = () => emit("move:column-up");
 
 const onUpdateTitle = (newTitle: string) => emit("update:title", newTitle);
 </script>
-<style scoped>
-.column-header {
-	align-items: top;
-}
-</style>

src/modules/feature/board/board/BoardHeader.vue

@@ -203,7 +203,7 @@ watchEffect(() => {
 @import "@/styles/settings.scss";
 
 .v-chip {
-	cursor: pointer;
+	cursor: default;
 }
 
 .input-width-calc-span {

src/modules/feature/board/card/CardHost.vue

@@ -32,6 +32,7 @@
 						@update:value="onUpdateCardTitle($event, cardId)"
 						:isFocused="isFocusedById"
 						@enter="onEnter"
+						class="mx-n4 mb-n2"
 					/>
 
 					<div class="board-menu" :class="boardMenuClasses">

src/modules/feature/board/shared/BoardAnyTitleInput.vue

@@ -1,6 +1,7 @@
 <template>
 	<VTextField
 		v-if="scope === 'board'"
+		class="title-input"
 		hide-details="auto"
 		v-model="modelValue"
 		variant="solo"
@@ -9,7 +10,7 @@
 		:placeholder="placeholderText"
 		bg-color="transparent"
 		ref="titleInput"
-		:readonly="!isEditMode"
+		:disabled="!isEditMode"
 		:role="isEditMode ? 'input' : 'heading'"
 		:aria-level="ariaLevel"
 		:tabindex="isEditMode ? 0 : -1"
@@ -26,22 +27,18 @@
 		:rows="1"
 		auto-grow
 		flat
-		class="mx-n4 mb-n2"
+		class="title-input"
 		:placeholder="placeholderText"
 		bg-color="transparent"
 		ref="titleInput"
-		:readonly="!isEditMode"
+		:disabled="!isEditMode"
 		:role="isEditMode ? 'input' : 'heading'"
 		:aria-level="ariaLevel"
 		@keydown.enter="onEnter"
 		:tabindex="isEditMode ? 0 : -1"
 		:autofocus="internalIsFocused"
 		:maxlength="maxLength"
-	>
-		<template v-slot:append-inner>
-			<slot />
-		</template>
-	</VTextarea>
+	/>
 </template>
 
 <script lang="ts">
@@ -96,7 +93,7 @@ export default defineComponent({
 		const titleInput = ref(null);
 
 		useInlineEditInteractionHandler(async () => {
-			setFocusOnEdit();
+			await setFocusOnEdit();
 		});
 
 		const setFocusOnEdit = async () => {
@@ -209,18 +206,6 @@ export default defineComponent({
 	overflow: hidden;
 }
 
-:deep(textarea[readonly]) {
-	cursor: pointer;
-}
-
-:deep(input[readonly]) {
-	cursor: pointer;
-}
-
-:deep(textarea[readonly])::placeholder {
-	opacity: 1;
-}
-
 :deep(input) {
 	font-size: var(--heading-3);
 	background: transparent !important;
@@ -231,4 +216,13 @@ export default defineComponent({
 	align-items: flex-start;
 	padding-top: 8px !important;
 }
+
+.title-input {
+	cursor: pointer;
+	pointer-events: unset !important;
+}
+
+.title-input :deep(.v-field--disabled) {
+	opacity: var(--v-high-emphasis-opacity);
+}
 </style>