I'm currently grappling with an issue regarding the focusing of the first error field within a form upon submission. Despite successfully implementing functionality to focus on the first error field within a form upon submission, I'm encountering challenges post-implementation. Here's a detailed overview:
Environment Setup: Ember 3.14 running on Node 10.8.0 with Mirage for server API mocking.
Objective: The primary aim is to ensure that upon form submission, the initial error field is focused on for user attention.
Approach Employed: To achieve this functionality, I successfully implemented code to identify all elements marked with an error class within the designated form. Subsequently, I effectively focused on the first identified error element. This approach is functioning as intended, seamlessly highlighting the first error field upon form submission.
Challenges Encountered: Following successful implementation, numerous test cases consistently fail with the error message: Uncaught TypeError: Cannot read property 'charAt' of undefined. It's noteworthy that manual tests confirm the proper functionality of the fix. However, these failures are traced back to the Vendor.js file. Interestingly, the failing charAt() calls are not present in the original vendor code but appear in the compiled vendor.js file, particularly in polyfills. Additionally, debugging has been challenging due to the presence of charAt() calls within eval statements.
Nature of Test Cases: Update and Submit: Verifies if the request action updates to 'Submit' after user submission. Completed Request Readonly: Checks if completed requests render specific elements as disabled or readonly. Edit Request: Ensures users can edit requests, update instructions, and leave pages without issues. Open and Close Request: Tests whether opening and closing a request preserves the current page URL without any prompts to stay.
What I Tried: I successfully implemented functionality to focus on the first error field within a form upon submission, resolving the initial error. This involved identifying all elements marked with an error class within the designated form and ensuring that the first identified error element receives focus.
Expectations: Post-implementation, I expected the implemented functionality to work seamlessly, focusing on the first error field as intended. However, while the implementation itself is functioning correctly, I'm facing challenges specifically with certain test cases. These test cases are failing consistently despite the functionality working as expected. The aim remains to provide immediate feedback on input errors and facilitate smoother form interaction.
Heres the code reference here all the test cases run fine but when we add the code to focus the firstInput the expected results are achieved but the test cases starts to fail:
focusFirstErrorInForm(element) {
const parentForm = this.gettingParticularForm(element);
console.log(parentForm);
if (parentForm) {
setTimeout(() => {
const errorContainer = this.gettingErrorContainer(parentForm);
if (errorContainer) {
if (errorContainer.length > 0) {
let firstInput = this.gettingFirstErrorFromContainer(errorContainer);
if (firstInput !== null || firstInput !== undefined) {
firstInput.focus();
}
} else {
this.getErrorKcContainer(parentForm);
}
}
}, 100);
}
}
test case failing message - message: > Uncaught TypeError: Cannot read property 'charAt' of undefined negative: > false browser log: |
Also adding console logs between test cases to debug , surprisingly all the consoles are logged.
