Merge pull request #7286 from nextcloud-libraries/backport/input-placeholders

[stable8] fix(NcInputField, NcTextareaField): remove placeholder on Nextcloud 32+

Author: susnux

src/components/NcInputField/NcInputField.vue

@@ -101,6 +101,7 @@ import GenRandomId from '../../utils/GenRandomId.js'
 import AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'
 import Check from 'vue-material-design-icons/Check.vue'
 import { useModelMigration } from '../../composables/useModelMigration.ts'
+import { isLegacy32 } from '../../utils/legacy.ts'
 
 export default {
 	name: 'NcInputField',
@@ -297,7 +298,13 @@ export default {
 		},
 
 		computedPlaceholder() {
-			return this.hasPlaceholder ? this.placeholder : this.label
+			if (this.hasPlaceholder) {
+				return this.placeholder
+			}
+			if (isLegacy32) {
+				return this.label
+			}
+			return undefined
 		},
 
 		isValidLabel() {

src/components/NcTextArea/NcTextArea.vue

@@ -135,6 +135,7 @@ import GenRandomId from '../../utils/GenRandomId.js'
 import AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'
 import Check from 'vue-material-design-icons/Check.vue'
 import { useModelMigration } from '../../composables/useModelMigration.ts'
+import { isLegacy32 } from '../../utils/legacy.ts'
 
 export default {
 	name: 'NcTextArea',
@@ -288,7 +289,13 @@ export default {
 		},
 
 		computedPlaceholder() {
-			return this.hasPlaceholder ? this.placeholder : this.label
+			if (this.hasPlaceholder) {
+				return this.placeholder
+			}
+			if (isLegacy32) {
+				return this.label
+			}
+			return undefined
 		},
 
 		isValidLabel() {

src/globals.d.ts

@@ -22,5 +22,10 @@ declare global {
 		_nc_contacts_menu_hooks: { [id: string]: ContactsMenuAction }
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		OCP: any
+		OC: {
+			config: {
+				version: string
+			}
+		}
 	}
 }

src/utils/legacy.ts

@@ -0,0 +1,6 @@
+/*
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+export const isLegacy32 = Number.parseInt(window.OC?.config.version.split('.')[0] ?? '0') < 32

styleguide/global.requires.js

@@ -100,7 +100,9 @@ window.OC = {
 	isUserAdmin() {
 		return true
 	},
-	config: {},
+	config: {
+		version: '31.0.0',
+	},
 	Util: {
 		/**
 		 * Compare two strings to provide a natural sort

tests/OC.js

@@ -23,6 +23,10 @@ export default {
 		},
 	},
 
+	config: {
+		version: '31.0.0',
+	},
+
 	coreApps: [
 		'',
 		'admin',