fix(input): prevent false validation errors during browser autofill (#884878)

[victorguimaraes2153]

Fix: Prevent validation errors on browser autofill for input components

🐛 Problem

The bds-input and bds-input-password components were incorrectly displaying validation error messages when the browser automatically filled fields using saved credentials. This occurred because:

1. The emailValidation() method was executed even on empty fields
2. The numberValidation() method validated fields containing only whitespace
3. There was no proper cleanup of validation states during user interactions

✅ Solution

bds-input Component:

• Safe validation: Added verification to prevent Cannot read properties of undefined (reading 'valid') error in checkValidity() method
• Conditional validation: Modified emailValidation() and numberValidation() to only validate when field has content
• State cleanup: Implemented automatic cleanup of validation states on onFocus event

bds-input-password Component:

• State management: Improved validation state management in onInput, onFocus and onBlur events
• Synchronization: Added componentDidUpdate to maintain synchronization between value and nativeInput
• Key handling: Fixed keyPressWrapper to properly handle Backspace and Delete keys

🔗 Related Issue

Fixes #884878

🚀 How to Test

1. Open a form with bds-input (email type) and bds-input-password fields
2. Save credentials in browser if not already saved
3. Reload the page and use browser autofill
4. Verify that no unnecessary error messages appear
5. Type emails with spaces to confirm they are still validated as invalid
   

[github-actions]

PR Preview Action v1.6.2
🚀 View preview at https://takenet.github.io/blip-ds/pr-preview/pr-1072/
Built to branch gh-pages at 2025-07-21 18:12 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[cyber-sast]

Checkmarx One – Scan Summary & Details – bf4cf3f1-ca44-4d81-a700-d4165105924f

New Issues (46)

Checkmarx found the following issues in this Pull Request

Severity	Issue	Source File / Package	Checkmarx Insight
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: kAQmZQQn61%2BWkJ%2BqbQYVTn8wZtw%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: e7GTG%2FTTSB4UE0gT6GGBkY4amq4%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: oIFaoW8oDgrSb0WACT1xlQz8tGo%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: C6T94idqOhYRWMIa9f3D2gdM6Zo%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: Gefhkdy34iA36Y62B5JvWXmG%2FKY%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: U4mRocddUeUVyg3nHsKf0oU6sfY%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: 4tfF4nQrVJx%2F2NbqufDMaB4lDVU%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: fkDPkXfsvbdvWFsXn86QcgnVxr0%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: RCDF%2BViisQUbr%2FyeDcT3fmY4AYg%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: TZz5SrNzE%2BbnkjRRWHN7J6yJ92U%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: i8wel31xs%2FuaLUeMcrrExqgWhEQ%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: RPVP6QG6I0ZQ534BR2QXF8BvRTQ%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: MMmQVGwOqlhi0PVXHLJmMY%2BX7pE%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: OM7iDxdibVjEZmxMVD2dygqoN0o%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: RJEHFpvd7BoGsVEVfZlqXUMykus%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: dCXhrpBSV533Adv7dNORIPlJd2I%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: ZzAj5UY7PaTS%2Bsb5QN%2B%2BMNEZKP0%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: SwLtEUK7xujKNBQUPNUAW4F4kGY%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: i2dssBorRVUy9trLcNCs4IMM9Pc%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: jBml71zvBtEwHli%2By3DPlhEhvb8%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: ZPejRXpACWOjliyCCA1Xi47XPsI%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: I0L9BaQ%2BxhNH51qJEX6VWuQNf2c%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: Z842iriyVZEj2G0U1A9f6tPrYUs%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: lo1odzHYZATafR7oMAnAHasWDQ4%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: M99%2FNjVGP4kobKrXRn%2FAxyxkViI%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: OocX%2BmS8bIaASZoMj8huwleDNpM%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: Xz8SH6hUN3u9b%2FCodU7PCWVoNEM%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: PAFBnubvDwoXiCVH9JILdPiR%2BhQ%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: bakHEtVbi9uzjkW9%2BOK5LfMRaIA%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: ODaRWTieaF31%2BHudIRwVV5holpo%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: Fb7Y0rjQCXUJfZeju0l1unljimM%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: %2FBolmNAqW%2FZYDFjAvksiS6mMKVo%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: 7%2BT6ktqBGLhphiF7%2Bmc%2BfYvWG7s%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: WuXNlruqJGSAJIxI%2B9F1VaA2v%2FU%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: JlqfujNu4GoT5YIfShMh04fZVJQ%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: WRo8T%2Bnvl8NO6WbzIl786G%2Bt%2BfM%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: PerfO%2FMgQ%2BIgQP9wT0qkItWuUOk%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: EdWSX%2Fl1SYye8lZQGqAAFQY0Ob8%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: 0MiwfkSzZmw6RODBi3Z2V4niSCg%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: W%2FRqFrr1MdWKycBo9N4oMdX0Ig0%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: GwxgPqZq%2F%2F4EnF9kS5nIZJos9Ks%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: UQ4P%2F1veFV8uVw9iMGWKtSPV4dk%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: 7AfXse9OAzydBTAckgaoCc0O5h8%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: UnYnU3MW2KDCB%2BLLEiFdyWBbVgY%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: 7vGMqUgGGRcbXY2BiZiKW4ZMuwg%3D Attack Vector
	Use_Of_Hardcoded_Password	/src/components/input-password/input-password.tsx: 5	details The application uses the hard-coded password "bds-input-password" for authentication purposes, either using it to verify users' identities, or t... ID: 9R21D4K5jVNU9cntyyMsyLcf90A%3D Attack Vector