fix(Nc*Field): do not pass all props to InputField BY filtering $props

src/components/NcPasswordField/NcPasswordField.vue

@@ -96,10 +96,9 @@ export default {
 </docs>
 
 <template>
-	<NcInputField v-bind="{...$attrs, ...$props }"
+	<NcInputField v-bind="propsAndAttrsToForward"
 		ref="inputField"
 		:type="isPasswordHidden ? 'password' : 'text'"
-		:show-trailing-button="showTrailingButton"
 		:trailing-button-label="trailingButtonLabelPassword"
 		:helper-text="computedHelperText"
 		:error="computedError"
@@ -129,6 +128,23 @@ import { generateOcsUrl } from '@nextcloud/router'
 import { t } from '../../l10n.js'
 import logger from '../../utils/logger.js'
 
+/**
+ * @typedef PasswordPolicy
+ * @property {object} api - The URLs to the password_policy app methods
+ * @property {string} api.generate - The URL to the password generator
+ * @property {string} api.validate - The URL to the password validator
+ * @property {boolean} enforceNonCommonPassword - Whether to enforce non common passwords
+ * @property {boolean} enforceNumericCharacters - Whether to enforce numeric characters
+ * @property {boolean} enforceSpecialCharacters - Whether to enforce special characters
+ * @property {boolean} enforceUpperLowerCase - Whether to enforce upper and lower case
+ * @property {number} minLength - The minimum length of the password
+ */
+
+/** @type {PasswordPolicy|null} */
+const passwordPolicy = loadState('core', 'capabilities', {}).password_policy || null
+
+const NcInputFieldProps = new Set(Object.keys(NcInputField.props))
+
 export default {
 	name: 'NcPasswordField',
 
@@ -142,18 +158,32 @@ export default {
 	inheritAttrs: false,
 
 	props: {
+		/**
+		 * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props
+		 */
+		// Not an actual prop but needed to show in vue-styleguidist docs
+		// eslint-disable-next-line
+		' ': {},
+
+		// Reuse all the props from NcInputField for better typing and documentation
 		...NcInputField.props,
 
+		// Redefined props
+
 		/**
-		 * Additional error message
-		 *
-		 * This will be displayed beneath the input field
+		 * Controls whether to display the trailing button.
 		 */
-		helperText: {
-			type: String,
-			default: '',
+		 showTrailingButton: {
+			type: Boolean,
+			default: true,
 		},
 
+		// Removed NcInputField props, defined only by this component
+
+		trailingButtonLabel: undefined,
+
+		// Custom props
+
 		/**
 		 * Check if the user entered a valid password using the password_policy
 		 * app if available.
@@ -183,14 +213,6 @@ export default {
 			type: Number,
 			default: null,
 		},
-
-		/**
-		 * Controls whether to display the trailing button.
-		 */
-		showTrailingButton: {
-			type: Boolean,
-			default: true,
-		},
 	},
 
 	emits: [
@@ -203,7 +225,6 @@ export default {
 		return {
 			isPasswordHidden: true,
 			internalHelpMessage: '',
-			passwordPolicy: loadState('core', 'capabilities', {}).password_policy || null,
 			isValid: null,
 		}
 	},
@@ -223,7 +244,7 @@ export default {
 		},
 
 		rules() {
-			const { minlength, passwordPolicy } = this
+			const { minlength } = this
 			return {
 				minlength: minlength ?? passwordPolicy?.minLength,
 			}
@@ -232,17 +253,26 @@ export default {
 		trailingButtonLabelPassword() {
 			return this.isPasswordHidden ? t('Show password') : t('Hide password')
 		},
+
+		propsAndAttrsToForward() {
+			return {
+				// Proxy all the HTML attributes
+				...this.$attrs,
+				// Proxy original NcInputField's props
+				...Object.fromEntries(
+					Object.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key)),
+				),
+			}
+		},
 	},
 
 	watch: {
 		value(newValue) {
 			if (this.checkPasswordStrength) {
-				if (this.passwordPolicy === null) {
+				if (passwordPolicy === null) {
 					return
 				}
-				if (this.passwordPolicy) {
-					this.checkPassword(newValue)
-				}
+				this.checkPassword(newValue)
 			}
 		},
 	},

src/components/NcTextField/NcTextField.vue

@@ -130,9 +130,8 @@ export default {
 </docs>
 
 <template>
-	<NcInputField v-bind="{...$attrs, ...$props }"
+	<NcInputField v-bind="propsAndAttrsToForward"
 		ref="inputField"
-		:trailing-button-label="clearTextLabel"
 		v-on="$listeners"
 		@input="handleInput">
 		<!-- Default slot for the leading icon -->
@@ -157,6 +156,8 @@ import Undo from 'vue-material-design-icons/UndoVariant.vue'
 
 import { t } from '../../l10n.js'
 
+const NcInputFieldProps = new Set(Object.keys(NcInputField.props))
+
 export default {
 	name: 'NcTextField',
 
@@ -171,11 +172,32 @@ export default {
 	inheritAttrs: false,
 
 	props: {
+		/**
+		 * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props
+		 */
+		// Not an actual prop but needed to show in vue-styleguidist docs
+		// eslint-disable-next-line
+		' ': {},
+
+		// Reuse all the props from NcInputField for better typing and documentation
 		...NcInputField.props,
 
+		// Redefined props
+
+		/**
+		 * Label of the trailing button
+		 */
+		trailingButtonLabel: {
+			type: String,
+			default: t('Clear text'),
+		},
+
+		// Custom props
+
 		/**
 		 * Specifies which material design icon should be used for the trailing
-		 * button. Value can be `close`, `arrowRight`, or `undo`.
+		 * button.
+		 * @type {'close'|'arrowRight'|'undo'}
 		 */
 		trailingButtonIcon: {
 			type: String,
@@ -193,8 +215,15 @@ export default {
 	],
 
 	computed: {
-		clearTextLabel() {
-			return this.trailingButtonLabel || t('Clear text')
+		propsAndAttrsToForward() {
+			return {
+				// Proxy all the HTML attributes
+				...this.$attrs,
+				// Proxy original NcInputField's props
+				...Object.fromEntries(
+					Object.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key)),
+				),
+			}
 		},
 	},