search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
289 stars 76 forks source link

BUG-000167336 The `calciteInputInput` event is triggered early causing incorrect status #9581

Open DitwanP opened 4 months ago

DitwanP commented 4 months ago

Check existing issues

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 team

N/A

The calciteInputInput event is triggered early in Calcite Design System version 2.8.0.
Salesforce ID: BUG-000167336
Salesforce Submitter: Dipali Joshi
Salesforce Submit Date: 5/08/2024 10:41 PM
Salesforce Bug Type: Failure/Error
Salesforce Severity: Medium
Steps to Repro:

Steps to Reproduce: 

 

  1.  Open the sample application using the provided link. (Codepen: https://codepen.io/Dipali-Joshi/pen/ExzxYaX?editors=1000) 
  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 14 and 23 to add a timeout to the code. Observe that this time the status changes successfully. 
  8. This indicates that the event triggers before the file upload is successful, which in this workflow causes the input status to remain invalid even though the file upload is successful. 

 

Note: 

1.     The” Invalid File” status is used to clarify that the event is triggering too early. 


Repro Data: (n/a)
Work Around: (n/a)
Product: Calcite Design System
Functional Category: Calcite Design System
Client Platform: (n/a)
Version Found: N/A
Planned Version Fixed: (n/a)
Comment: (n/a)

geospatialem commented 3 months ago

Spike to determine the scope, if it applies to the type="file", or may have additional impacts to the component.