From 9a083f903319098f2b2e937073a5fd3eb6d2532f Mon Sep 17 00:00:00 2001 From: Ashley Wright Date: Thu, 11 Dec 2025 16:27:37 -0700 Subject: [PATCH 1/2] fix: fixed the overlapping inputs when password and username are recieved in a different order --- src/views/credentials/Credentials.js | 148 ++++++++++++++------------- 1 file changed, 78 insertions(+), 70 deletions(-) diff --git a/src/views/credentials/Credentials.js b/src/views/credentials/Credentials.js index 8fb19e16c8..22e9da6f2c 100644 --- a/src/views/credentials/Credentials.js +++ b/src/views/credentials/Credentials.js @@ -443,73 +443,84 @@ export const Credentials = React.forwardRef( onSubmit={(e) => e.preventDefault()} style={styles.form} > - {credentials.map((field) => ( - - {field.field_type === CREDENTIAL_FIELD_TYPES.PASSWORD ? ( -
- }} - autoCapitalize="none" - autoComplete="new-password" - disabled={isProcessingMember} - error={validations.isError || !!errors[field.field_name]} - fullWidth={true} - helperText={ - (validations.isCapsLockOn && __('Caps lock is on')) || - validations.validateSpaceMessage || - errors[field.field_name] - } - id={field.field_name} - inputProps={{ - 'aria-label': field.label, - 'aria-describedby': errors[field.field_name] - ? `${field.field_name}-error` - : undefined, - }} - inputRef={(el) => (inputRefs.current[field.field_name] = el)} - label={field.label} - name={field.field_name} - onBlur={handleBlur} - onChange={(e) => { - handleSpaceValidation(e) - handlePasswordTextChange(e) - }} - onFocus={handleFocus} - onKeyDown={handlePasswordEnterChange} - required={true} - spellCheck="false" - type={validations.showPassword ? 'text' : 'password'} - value={values[field.field_name] || ''} - /> -
- ) : ( -
- (inputRefs.current[field.field_name] = el)} - label={field.label} - name={field.field_name} - onChange={handleUserNameTextChange} - required={true} - spellCheck="false" - value={values[field.field_name] || ''} - /> -
- )} - - ))} + {credentials.map((field, index) => { + const isLastField = index === credentials.length - 1 + const hasError = !!errors[field.field_name] + let fieldStyle = {} + if (hasError) { + fieldStyle = styles.inputError + } else if (!isLastField) { + fieldStyle = styles.input + } + + return ( + + {field.field_type === CREDENTIAL_FIELD_TYPES.PASSWORD ? ( +
+ }} + autoCapitalize="none" + autoComplete="new-password" + disabled={isProcessingMember} + error={validations.isError || !!errors[field.field_name]} + fullWidth={true} + helperText={ + (validations.isCapsLockOn && __('Caps lock is on')) || + validations.validateSpaceMessage || + errors[field.field_name] + } + id={field.field_name} + inputProps={{ + 'aria-label': field.label, + 'aria-describedby': errors[field.field_name] + ? `${field.field_name}-error` + : undefined, + }} + inputRef={(el) => (inputRefs.current[field.field_name] = el)} + label={field.label} + name={field.field_name} + onBlur={handleBlur} + onChange={(e) => { + handleSpaceValidation(e) + handlePasswordTextChange(e) + }} + onFocus={handleFocus} + onKeyDown={handlePasswordEnterChange} + required={true} + spellCheck="false" + type={validations.showPassword ? 'text' : 'password'} + value={values[field.field_name] || ''} + /> +
+ ) : ( +
+ (inputRefs.current[field.field_name] = el)} + label={field.label} + name={field.field_name} + onChange={handleUserNameTextChange} + required={true} + spellCheck="false" + value={values[field.field_name] || ''} + /> +
+ )} + + ) + })} @@ -598,9 +609,6 @@ const getStyles = (tokens) => { marginBottom: tokens.Spacing.Large, marginTop: tokens.Spacing.XSmall, }, - passwordInputError: { - marginTop: tokens.Spacing.XSmall, - }, buttonBack: { marginTop: tokens.Spacing.Medium, marginBottom: '12px', From e640b294f45da5a366b935b712f004f16cf26240 Mon Sep 17 00:00:00 2001 From: Ashley Wright Date: Fri, 12 Dec 2025 11:52:09 -0700 Subject: [PATCH 2/2] fix: fixed the margin issue with credentials and removed password helper --- src/hooks/useForm.js | 5 +- src/views/credentials/Credentials.js | 156 +++++++++++++-------------- 2 files changed, 77 insertions(+), 84 deletions(-) diff --git a/src/hooks/useForm.js b/src/hooks/useForm.js index 6d0bc6a2d3..07330497c3 100644 --- a/src/hooks/useForm.js +++ b/src/hooks/useForm.js @@ -63,7 +63,10 @@ export const useForm = (submitCallback, formSchema, initialValues) => { event.persist() } - setValues((values) => ({ ...values, [event.target.name]: event.target.value })) + setValues((values) => ({ + ...values, + [event.target.name || event.target.id]: event.target.value, + })) } return { diff --git a/src/views/credentials/Credentials.js b/src/views/credentials/Credentials.js index 22e9da6f2c..9c0e665a00 100644 --- a/src/views/credentials/Credentials.js +++ b/src/views/credentials/Credentials.js @@ -443,85 +443,72 @@ export const Credentials = React.forwardRef( onSubmit={(e) => e.preventDefault()} style={styles.form} > - {credentials.map((field, index) => { - const isLastField = index === credentials.length - 1 - const hasError = !!errors[field.field_name] - let fieldStyle = {} - if (hasError) { - fieldStyle = styles.inputError - } else if (!isLastField) { - fieldStyle = styles.input - } - - return ( - - {field.field_type === CREDENTIAL_FIELD_TYPES.PASSWORD ? ( -
- }} - autoCapitalize="none" - autoComplete="new-password" - disabled={isProcessingMember} - error={validations.isError || !!errors[field.field_name]} - fullWidth={true} - helperText={ - (validations.isCapsLockOn && __('Caps lock is on')) || - validations.validateSpaceMessage || - errors[field.field_name] - } - id={field.field_name} - inputProps={{ - 'aria-label': field.label, - 'aria-describedby': errors[field.field_name] - ? `${field.field_name}-error` - : undefined, - }} - inputRef={(el) => (inputRefs.current[field.field_name] = el)} - label={field.label} - name={field.field_name} - onBlur={handleBlur} - onChange={(e) => { - handleSpaceValidation(e) - handlePasswordTextChange(e) - }} - onFocus={handleFocus} - onKeyDown={handlePasswordEnterChange} - required={true} - spellCheck="false" - type={validations.showPassword ? 'text' : 'password'} - value={values[field.field_name] || ''} - /> -
- ) : ( -
- (inputRefs.current[field.field_name] = el)} - label={field.label} - name={field.field_name} - onChange={handleUserNameTextChange} - required={true} - spellCheck="false" - value={values[field.field_name] || ''} - /> -
- )} - - ) - })} - + {credentials.map((field) => ( + + {field.field_type === CREDENTIAL_FIELD_TYPES.PASSWORD ? ( +
+ }} + autoCapitalize="none" + autoComplete="off" + disabled={isProcessingMember} + error={validations.isError || !!errors[field.field_name]} + fullWidth={true} + helperText={ + (validations.isCapsLockOn && __('Caps lock is on')) || + validations.validateSpaceMessage || + errors[field.field_name] + } + id={field.field_name} + inputProps={{ + 'aria-label': field.label, + 'aria-describedby': errors[field.field_name] + ? `${field.field_name}-error` + : undefined, + }} + inputRef={(el) => (inputRefs.current[field.field_name] = el)} + label={field.label} + onBlur={handleBlur} + onChange={(e) => { + handleSpaceValidation(e) + handlePasswordTextChange(e) + }} + onFocus={handleFocus} + onKeyDown={handlePasswordEnterChange} + required={true} + spellCheck="false" + type={validations.showPassword ? 'text' : 'password'} + value={values[field.field_name] || ''} + /> +
+ ) : ( +
+ (inputRefs.current[field.field_name] = el)} + label={field.label} + onChange={handleUserNameTextChange} + required={true} + spellCheck="false" + value={values[field.field_name] || ''} + /> +
+ )} + + ))} +