BUG-000167528 [calcite-input]: file type emits "Failed to set the 'value' property" error

Check existing issues

[X] I have checked for existing issues to avoid duplicates

Actual Behavior

When the file type calcite-input has the 'name' attribute and is inside a form, it emits this error: So when the form is submitted, file value is null.

Expected Behavior

The calcite-input should not emit the error and on form submission the value shoud be read correctly.

Reproduction Sample

~https://codesandbox.io/p/devbox/calcite-input-file-8yqp3n?file=%2Fsrc%2FApp.jsx%3A1%2C14~ File is not accessible https://codepen.io/djha1999/pen/OJYPeqR _Added from BUG-000167528

Reproduction Steps

Open the sample
Click on file input and select a file.
The error appears in the console. ~4. Click on the submit button~ ~5. The empty value is displayed in the console.~

Reproduction Version

2.8.0

Relevant Info

Was also submitted as BUG-000167528, accepted on 5/17/2024

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

No response

Calcite package

[X] @esri/calcite-components
[ ] @esri/calcite-components-angular
[X] @esri/calcite-components-react
[ ] @esri/calcite-design-tokens
[ ] @esri/eslint-plugin-calcite-components

Esri team

N/A

The Calcite file input returns an error message when the 'name' attribute is placed within an HTML form element in Calcite Design System 2.8.1.

Salesforce ID: BUG-000167528
Salesforce Submitter: Disha Jha
Salesforce Submit Date: 5/15/2024 6:15 PM
Salesforce Bug Type: Failure/Error
Salesforce Severity: Medium
Steps to Repro:

Steps to Reproduce:

1. Open the sample application: https://codepen.io/djha1999/pen/OJYPeqR

2. Click the ‘Choose File’ to upload a file

3. Observe the following error in the console:

DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

Notes:

• The issue doesn’t occur when the Calcite file input with a ‘name’ attribute is used outside the HTML <form> element

• The issue also doesn’t occur when the Calcite file input without the ‘name’ attribute is used within the HTML <form> element

• However, the 'name' attribute is required for the form's value to get submitted as mentioned in the web development and Calcite documentation:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name

https://developers.arcgis.com/calcite-design-system/components/input/#:~:text=false-,name,-name

• The sample documentation has code snippets that show calcite-inputs with ‘name’ attribute could be added inside HTML form elements:

https://developers.arcgis.com/calcite-design-system/core-concepts/#forms

• Hence, the expected behavior would be that an HTML file input with a ‘name’ attribute is accepted within HTML forms like other Calcite inputs such as Input Number, Input Date Picker etc.

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

Esri / calcite-design-system