From d561928db8e99996da4918654aa1e95d381b2372 Mon Sep 17 00:00:00 2001
From: "Enjeck C." <patrathewhiz@gmail.com>
Date: Tue, 5 Aug 2025 05:14:17 +0100
Subject: [PATCH 1/4] fix: Remove nbsp in component test widget

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>
---
 src/views/ContentReferenceWidget.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/ContentReferenceWidget.vue b/src/views/ContentReferenceWidget.vue
index 30e9e5ee69..64d5c8d8bc 100644
--- a/src/views/ContentReferenceWidget.vue
+++ b/src/views/ContentReferenceWidget.vue
@@ -6,8 +6,8 @@
 	<div v-if="richObject" class="tables-content-widget" data-cy="contentReferenceWidget">
 		<div class="header">
 			<h2>
-				<NcLoadingIcon v-if="!rows || rows.length === 0" :size="30" />
-				<span v-else>{{ richObject.emoji }}</span>&nbsp;{{ richObject.title }}
+				<NcLoadingIcon v-if="!rows" :size="30" />
+				<span v-else>{{ richObject.emoji }}</span> {{ richObject.title }}
 			</h2>
 			<Options
 				:config="tablePermissions"

From b680f4393eb8e6f43a4c319f40c37f57a1d77657 Mon Sep 17 00:00:00 2001
From: "Enjeck C." <patrathewhiz@gmail.com>
Date: Tue, 5 Aug 2025 07:31:21 +0100
Subject: [PATCH 2/4] feat: Inline editing - Selection

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>
---
 .../partials/TableCellMultiSelection.vue      | 149 ++++++++++++++++--
 .../ncTable/partials/TableCellSelection.vue   | 113 ++++++++++++-
 .../components/ncTable/partials/TableRow.vue  |   2 -
 3 files changed, 248 insertions(+), 16 deletions(-)

diff --git a/src/shared/components/ncTable/partials/TableCellMultiSelection.vue b/src/shared/components/ncTable/partials/TableCellMultiSelection.vue
index f7c9c8a116..87f5d5d5ea 100644
--- a/src/shared/components/ncTable/partials/TableCellMultiSelection.vue
+++ b/src/shared/components/ncTable/partials/TableCellMultiSelection.vue
@@ -3,22 +3,48 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div>
-		<ul>
-			<li v-for="v in getObjects()" :key="v.id">
-				{{ v.label }}<span v-if="v.deleted" :title="t('tables', 'This option is outdated.')">&nbsp;⚠️</span>
-			</li>
-		</ul>
+	<div class="cell-multi-selection">
+		<div v-if="!isEditing" class="non-edit-mode" @click="startEditing">
+			<ul>
+				<li v-for="v in getObjects()" :key="v.id">
+					{{ v.label }}<span v-if="v.deleted" :title="t('tables', 'This option is outdated.')">&nbsp;⚠️</span>
+				</li>
+			</ul>
+		</div>
+		<div v-else
+			ref="editingContainer"
+			class="edit-mode"
+			tabindex="0"
+			@keydown.enter="saveChanges"
+			@keydown.escape="cancelEdit">
+			<NcSelect v-model="editValues"
+				:tag-width="80"
+				:options="getAllNonDeletedOrSelectedOptions"
+				:multiple="true"
+				:aria-label-combobox="t('tables', 'Options')"
+				:disabled="localLoading || !canEditCell()"
+				style="width: 100%;" />
+			<div v-if="localLoading" class="loading-indicator">
+				<div class="icon-loading-small icon-loading-inline" />
+			</div>
+		</div>
 	</div>
 </template>
 
 <script>
-
+import { NcSelect } from '@nextcloud/vue'
 import { translate as t } from '@nextcloud/l10n'
+import cellEditMixin from '../mixins/cellEditMixin.js'
 
 export default {
 	name: 'TableCellMultiSelection',
 
+	components: {
+		NcSelect,
+	},
+
+	mixins: [cellEditMixin],
+
 	props: {
 		column: {
 			type: Object,
@@ -35,20 +61,125 @@ export default {
 			default: null,
 		},
 	},
+
+	computed: {
+		getOptions() {
+			return this.column.selectionOptions || []
+		},
+		getAllNonDeletedOrSelectedOptions() {
+			const options = this.getOptions.filter(item => {
+				return !item.deleted || this.optionIdIsSelected(item.id)
+			}) || []
+
+			options.forEach(opt => {
+				if (opt.deleted) {
+					opt.label += ' ⚠️'
+				}
+			})
+			return options
+		},
+	},
+
+	watch: {
+		isEditing(isEditing) {
+			if (isEditing) {
+				this.initEditValues()
+				// Use a small delay to prevent the same click event that triggered editing
+				// from immediately triggering the click outside handler
+				this.$nextTick(() => {
+					setTimeout(() => {
+						document.addEventListener('click', this.handleClickOutside)
+					}, 10)
+				})
+			} else {
+				// Remove click outside listener
+				document.removeEventListener('click', this.handleClickOutside)
+			}
+		},
+	},
+
 	methods: {
 		t,
+
 		getObjects() {
 			return this.column.getObjects(this.value)
 		},
-	},
 
+		optionIdIsSelected(id) {
+			// Check if the given id is selected (in the value array)
+			return this.value && this.value.includes(id)
+		},
+
+		getIdArrayFromObjects(objects) {
+			const ids = []
+			objects.forEach(o => {
+				ids.push(o.id)
+			})
+			return ids
+		},
+
+		initEditValues() {
+			if (this.value !== null) {
+				this.editValues = this.column.getObjects(this.value)
+			} else {
+				this.editValues = []
+			}
+		},
+		async saveChanges() {
+			if (this.localLoading) {
+				return
+			}
+
+			const newValue = this.getIdArrayFromObjects(this.editValues)
+
+			const success = await this.updateCellValue(newValue)
+
+			if (success) {
+				// Emit the updated value to parent to trigger immediate re-render
+				this.$emit('input', newValue)
+				this.$emit('update:value', newValue)
+				this.isEditing = false
+			} else {
+				this.cancelEdit()
+			}
+
+			this.localLoading = false
+		},
+
+		handleClickOutside(event) {
+			// Check if the click is outside the editing container
+			if (this.$refs.editingContainer && !this.$refs.editingContainer.contains(event.target)) {
+				this.saveChanges()
+			}
+		},
+	},
 }
 </script>
 <style lang="scss" scoped>
+.cell-multi-selection {
+	width: 100%;
+
+	.non-edit-mode {
+		cursor: pointer;
+		min-height: 20px;
+	}
+}
+
+.edit-mode {
+	.editor-buttons {
+		display: flex;
+		gap: 8px;
+		margin-top: 8px;
+		align-items: center;
+	}
+
+	.icon-loading-inline {
+		margin-left: 4px;
+	}
+}
 
 ul {
 	list-style-type: disc;
 	padding-left: calc(var(--default-grid-baseline) * 3);
 }
-
 </style>
diff --git a/src/shared/components/ncTable/partials/TableCellSelection.vue b/src/shared/components/ncTable/partials/TableCellSelection.vue
index 03d32a0ca6..7eac0d7232 100644
--- a/src/shared/components/ncTable/partials/TableCellSelection.vue
+++ b/src/shared/components/ncTable/partials/TableCellSelection.vue
@@ -3,18 +3,42 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div>
-		{{ column.getLabel(value) }}<span v-if="isDeleted()" :title="t('tables', 'This option is outdated.')">&nbsp;⚠️</span>
+	<div class="cell-selection">
+		<div v-if="!isEditing" class="non-edit-mode" @click="startEditing">
+			{{ column.getLabel(value) }}<span v-if="isDeleted()" :title="t('tables', 'This option is outdated.')">&nbsp;⚠️</span>
+		</div>
+		<div v-else
+			ref="editingContainer"
+			class="edit-mode"
+			tabindex="0"
+			@keydown.enter="saveChanges"
+			@keydown.escape="cancelEdit">
+			<NcSelect v-model="editValue"
+				:options="getAllNonDeletedOptions"
+				:aria-label-combobox="t('tables', 'Options')"
+				:disabled="localLoading || !canEditCell()"
+				style="width: 100%;" />
+			<div v-if="localLoading" class="loading-indicator">
+				<div class="icon-loading-small icon-loading-inline" />
+			</div>
+		</div>
 	</div>
 </template>
 
 <script>
-
+import { NcSelect } from '@nextcloud/vue'
 import { translate as t } from '@nextcloud/l10n'
+import cellEditMixin from '../mixins/cellEditMixin.js'
 
 export default {
 	name: 'TableCellSelection',
 
+	components: {
+		NcSelect,
+	},
+
+	mixins: [cellEditMixin],
+
 	props: {
 		column: {
 			type: Object,
@@ -31,19 +55,98 @@ export default {
 			default: null,
 		},
 	},
+
+	computed: {
+		getOptions() {
+			return this.column?.selectionOptions || []
+		},
+		getAllNonDeletedOptions() {
+			return this.getOptions.filter(item => {
+				return !item.deleted
+			})
+		},
+	},
+
+	watch: {
+		isEditing(isEditing) {
+			if (isEditing) {
+				this.initEditValue()
+				// Use a small delay to prevent the same click event that triggered editing
+				// from immediately triggering the click outside handler
+				this.$nextTick(() => {
+					setTimeout(() => {
+						document.addEventListener('click', this.handleClickOutside)
+					}, 10)
+				})
+			} else {
+				// Remove click outside listener
+				document.removeEventListener('click', this.handleClickOutside)
+			}
+		},
+	},
+
 	methods: {
 		t,
+
 		isDeleted() {
-			this.column.isDeletedLabel(this.value)
+			return this.column.isDeletedLabel(this.value)
+		},
+
+		getOptionObject(id) {
+			return this.getOptions.find(e => e.id === id) || null
+		},
+
+		initEditValue() {
+			if (this.value !== null) {
+				this.editValue = this.getOptionObject(parseInt(this.value))
+			} else {
+				this.editValue = null
+			}
+		},
+		async saveChanges() {
+			if (this.localLoading) {
+				return
+			}
+
+			const newValue = this.editValue?.id
+
+			const success = await this.updateCellValue(newValue)
+
+			if (!success) {
+				this.cancelEdit()
+			}
+
+			this.localLoading = false
+			this.isEditing = false
+		},
+
+		handleClickOutside(event) {
+			// Check if the click is outside the editing container
+			if (this.$refs.editingContainer && !this.$refs.editingContainer.contains(event.target)) {
+				this.saveChanges()
+			}
 		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
+.cell-selection {
+	width: 100%;
+
+	.non-edit-mode {
+		cursor: pointer;
+		min-height: 20px;
+	}
+}
+
+.edit-mode {
+	.icon-loading-inline {
+		margin-left: 4px;
+	}
+}
 
 span {
 	cursor: help;
 }
-
 </style>
diff --git a/src/shared/components/ncTable/partials/TableRow.vue b/src/shared/components/ncTable/partials/TableRow.vue
index e5579220de..f3a268d7ed 100644
--- a/src/shared/components/ncTable/partials/TableRow.vue
+++ b/src/shared/components/ncTable/partials/TableRow.vue
@@ -114,11 +114,9 @@ export default {
 		nonInlineEditableColumnTypes() {
 			return [
 				ColumnTypes.TextRich,
-				ColumnTypes.SelectionMulti,
 				ColumnTypes.Datetime,
 				ColumnTypes.DatetimeDate,
 				ColumnTypes.DatetimeTime,
-				ColumnTypes.Selection,
 			]
 		},
 	},

From e68c312e51e162ef2f05e0288a07a60368f1c91c Mon Sep 17 00:00:00 2001
From: "Enjeck C." <patrathewhiz@gmail.com>
Date: Thu, 14 Aug 2025 05:56:08 +0100
Subject: [PATCH 3/4] fix: Improve keyboard event handling and add clearable
 option in selection components

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>
---
 .../partials/TableCellMultiSelection.vue      | 35 +++++++++++++++----
 .../ncTable/partials/TableCellSelection.vue   |  5 +--
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/shared/components/ncTable/partials/TableCellMultiSelection.vue b/src/shared/components/ncTable/partials/TableCellMultiSelection.vue
index 87f5d5d5ea..fa52aa2271 100644
--- a/src/shared/components/ncTable/partials/TableCellMultiSelection.vue
+++ b/src/shared/components/ncTable/partials/TableCellMultiSelection.vue
@@ -15,14 +15,15 @@
 			ref="editingContainer"
 			class="edit-mode"
 			tabindex="0"
-			@keydown.enter="saveChanges"
-			@keydown.escape="cancelEdit">
+			@keydown.enter.stop="saveChanges"
+			@keydown.escape.stop="cancelEdit">
 			<NcSelect v-model="editValues"
 				:tag-width="80"
 				:options="getAllNonDeletedOrSelectedOptions"
 				:multiple="true"
 				:aria-label-combobox="t('tables', 'Options')"
 				:disabled="localLoading || !canEditCell()"
+				:clearable="true"
 				style="width: 100%;" />
 			<div v-if="localLoading" class="loading-indicator">
 				<div class="icon-loading-small icon-loading-inline" />
@@ -62,6 +63,12 @@ export default {
 		},
 	},
 
+	data() {
+		return {
+			localEditValues: [],
+		}
+	},
+
 	computed: {
 		getOptions() {
 			return this.column.selectionOptions || []
@@ -78,6 +85,14 @@ export default {
 			})
 			return options
 		},
+		editValues: {
+			get() {
+				return this.localEditValues
+			},
+			set(newValues) {
+				this.localEditValues = newValues || []
+			},
+		},
 	},
 
 	watch: {
@@ -86,13 +101,13 @@ export default {
 				this.initEditValues()
 				// Use a small delay to prevent the same click event that triggered editing
 				// from immediately triggering the click outside handler
+				// TODO: implement better click outside detection without setTimeout
 				this.$nextTick(() => {
 					setTimeout(() => {
 						document.addEventListener('click', this.handleClickOutside)
-					}, 10)
+					}, 100)
 				})
 			} else {
-				// Remove click outside listener
 				document.removeEventListener('click', this.handleClickOutside)
 			}
 		},
@@ -120,11 +135,16 @@ export default {
 
 		initEditValues() {
 			if (this.value !== null) {
-				this.editValues = this.column.getObjects(this.value)
+				this.localEditValues = this.column.getObjects(this.value)
 			} else {
-				this.editValues = []
+				this.localEditValues = []
 			}
 		},
+		cancelEdit() {
+			this.isEditing = false
+			this.localEditValues = []
+		},
+
 		async saveChanges() {
 			if (this.localLoading) {
 				return
@@ -135,7 +155,7 @@ export default {
 			const success = await this.updateCellValue(newValue)
 
 			if (success) {
-				// Emit the updated value to parent to trigger immediate re-render
+				// trigger immediate re-render
 				this.$emit('input', newValue)
 				this.$emit('update:value', newValue)
 				this.isEditing = false
@@ -148,6 +168,7 @@ export default {
 
 		handleClickOutside(event) {
 			// Check if the click is outside the editing container
+			// But ignore clicks on dropdown options and scrollbars
 			if (this.$refs.editingContainer && !this.$refs.editingContainer.contains(event.target)) {
 				this.saveChanges()
 			}
diff --git a/src/shared/components/ncTable/partials/TableCellSelection.vue b/src/shared/components/ncTable/partials/TableCellSelection.vue
index 7eac0d7232..efe71a73ec 100644
--- a/src/shared/components/ncTable/partials/TableCellSelection.vue
+++ b/src/shared/components/ncTable/partials/TableCellSelection.vue
@@ -11,8 +11,8 @@
 			ref="editingContainer"
 			class="edit-mode"
 			tabindex="0"
-			@keydown.enter="saveChanges"
-			@keydown.escape="cancelEdit">
+			@keydown.enter.stop="saveChanges"
+			@keydown.escape.stop="cancelEdit">
 			<NcSelect v-model="editValue"
 				:options="getAllNonDeletedOptions"
 				:aria-label-combobox="t('tables', 'Options')"
@@ -73,6 +73,7 @@ export default {
 				this.initEditValue()
 				// Use a small delay to prevent the same click event that triggered editing
 				// from immediately triggering the click outside handler
+				// TODO: implement better click outside detection without setTimeout
 				this.$nextTick(() => {
 					setTimeout(() => {
 						document.addEventListener('click', this.handleClickOutside)

From c7ddc9f0e188cb4d3c977a2331715fdf4f586f75 Mon Sep 17 00:00:00 2001
From: "Enjeck C." <patrathewhiz@gmail.com>
Date: Sun, 17 Aug 2025 14:30:21 +0100
Subject: [PATCH 4/4] fix: Add border styling and refactor

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>
---
 .../partials/TableCellMultiSelection.vue      | 26 ++++++++++----
 .../ncTable/partials/TableCellSelection.vue   | 36 +++++++++++++++----
 2 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/src/shared/components/ncTable/partials/TableCellMultiSelection.vue b/src/shared/components/ncTable/partials/TableCellMultiSelection.vue
index fa52aa2271..9624485a04 100644
--- a/src/shared/components/ncTable/partials/TableCellMultiSelection.vue
+++ b/src/shared/components/ncTable/partials/TableCellMultiSelection.vue
@@ -4,7 +4,7 @@
 -->
 <template>
 	<div class="cell-multi-selection">
-		<div v-if="!isEditing" class="non-edit-mode" @click="startEditing">
+		<div v-if="!isEditing" class="non-edit-mode" @click="handleStartEditing">
 			<ul>
 				<li v-for="v in getObjects()" :key="v.id">
 					{{ v.label }}<span v-if="v.deleted" :title="t('tables', 'This option is outdated.')">&nbsp;⚠️</span>
@@ -66,6 +66,7 @@ export default {
 	data() {
 		return {
 			localEditValues: [],
+			isInitialEditClick: false,
 		}
 	},
 
@@ -99,16 +100,14 @@ export default {
 		isEditing(isEditing) {
 			if (isEditing) {
 				this.initEditValues()
-				// Use a small delay to prevent the same click event that triggered editing
-				// from immediately triggering the click outside handler
-				// TODO: implement better click outside detection without setTimeout
+				// Add click outside listener after the current event loop
+				// to avoid the same click that triggered editing from closing the editor
 				this.$nextTick(() => {
-					setTimeout(() => {
-						document.addEventListener('click', this.handleClickOutside)
-					}, 100)
+					document.addEventListener('click', this.handleClickOutside)
 				})
 			} else {
 				document.removeEventListener('click', this.handleClickOutside)
+				this.isInitialEditClick = false
 			}
 		},
 	},
@@ -116,6 +115,13 @@ export default {
 	methods: {
 		t,
 
+		handleStartEditing(event) {
+			this.isInitialEditClick = true
+			this.startEditing()
+			// Stop the event from propagating to avoid immediate click outside
+			event.stopPropagation()
+		},
+
 		getObjects() {
 			return this.column.getObjects(this.value)
 		},
@@ -167,6 +173,12 @@ export default {
 		},
 
 		handleClickOutside(event) {
+			// Ignore the initial click that started editing
+			if (this.isInitialEditClick) {
+				this.isInitialEditClick = false
+				return
+			}
+
 			// Check if the click is outside the editing container
 			// But ignore clicks on dropdown options and scrollbars
 			if (this.$refs.editingContainer && !this.$refs.editingContainer.contains(event.target)) {
diff --git a/src/shared/components/ncTable/partials/TableCellSelection.vue b/src/shared/components/ncTable/partials/TableCellSelection.vue
index efe71a73ec..7e34639f8b 100644
--- a/src/shared/components/ncTable/partials/TableCellSelection.vue
+++ b/src/shared/components/ncTable/partials/TableCellSelection.vue
@@ -4,7 +4,7 @@
 -->
 <template>
 	<div class="cell-selection">
-		<div v-if="!isEditing" class="non-edit-mode" @click="startEditing">
+		<div v-if="!isEditing" class="non-edit-mode" @click="handleStartEditing">
 			{{ column.getLabel(value) }}<span v-if="isDeleted()" :title="t('tables', 'This option is outdated.')">&nbsp;⚠️</span>
 		</div>
 		<div v-else
@@ -56,6 +56,12 @@ export default {
 		},
 	},
 
+	data() {
+		return {
+			isInitialEditClick: false,
+		}
+	},
+
 	computed: {
 		getOptions() {
 			return this.column?.selectionOptions || []
@@ -71,17 +77,15 @@ export default {
 		isEditing(isEditing) {
 			if (isEditing) {
 				this.initEditValue()
-				// Use a small delay to prevent the same click event that triggered editing
-				// from immediately triggering the click outside handler
-				// TODO: implement better click outside detection without setTimeout
+				// Add click outside listener after the current event loop
+				// to avoid the same click that triggered editing from closing the editor
 				this.$nextTick(() => {
-					setTimeout(() => {
-						document.addEventListener('click', this.handleClickOutside)
-					}, 10)
+					document.addEventListener('click', this.handleClickOutside)
 				})
 			} else {
 				// Remove click outside listener
 				document.removeEventListener('click', this.handleClickOutside)
+				this.isInitialEditClick = false
 			}
 		},
 	},
@@ -89,6 +93,13 @@ export default {
 	methods: {
 		t,
 
+		handleStartEditing(event) {
+			this.isInitialEditClick = true
+			this.startEditing()
+			// Stop the event from propagating to avoid immediate click outside
+			event.stopPropagation()
+		},
+
 		isDeleted() {
 			return this.column.isDeletedLabel(this.value)
 		},
@@ -122,6 +133,12 @@ export default {
 		},
 
 		handleClickOutside(event) {
+			// Ignore the initial click that started editing
+			if (this.isInitialEditClick) {
+				this.isInitialEditClick = false
+				return
+			}
+
 			// Check if the click is outside the editing container
 			if (this.$refs.editingContainer && !this.$refs.editingContainer.contains(event.target)) {
 				this.saveChanges()
@@ -141,6 +158,11 @@ export default {
 	}
 }
 
+:deep(.vs__dropdown-toggle) {
+    border: var(--vs-border-width) var(--vs-border-style) var(--vs-border-color);
+    border-radius: var(--vs-border-radius);
+}
+
 .edit-mode {
 	.icon-loading-inline {
 		margin-left: 4px;