The calciteInputInput event is triggered early causing incorrect status

[DitwanP]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

When a file is uploaded using the calcite-input component, the status property does not change from invalid to valid as expected, even though the file upload is successful. This is because the event listener for the calciteInputInput event triggers before the file upload completes, causing the input status to remain invalid. Adding a timeout resolves the issue, indicating a timing problem with the event trigger.

Expected Behavior

The timing of the even triggering should be adjusted so that the input status can correctly reflect the current state.

Reproduction Sample

https://codepen.io/Dipali-Joshi/pen/ExzxYaX?editors=1000

Reproduction Steps

1. Open the sample application using the provided link.
2. Open the Console in Developer Tools.
3. Observe that the ‘validation-message’ “Invalid File” is displayed because the ‘status’ property of the calcite-input element at line 10 is set to ‘invalid’ as a default.
4. An event listener triggered by the ‘calciteInputInput’ event is added to the input element, which checks the ‘value’ of the input to change the status to ‘valid’ once a file has been uploaded.
5. Choose and upload a file using the input and observe that the status does not change even though the ‘value’ property has a value (seen in the console log).
6. We can also observe an error that the ‘files’ property of the input is not defined.
7. Now uncomment line 14 and 23 to add a timeout to the code. Observe that this time the status changes successfully.

Reproduction Version

2.8.0

Relevant Info

Logged as BUG-000167336

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Impact

No response

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

N/A