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

[bedzhist]

Check existing issues

• 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.

Blocked issues: #8126

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

1. Open the sample
2. Click on file input and select a file.
3. 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

• @esri/calcite-components
• @esri/calcite-components-angular
• @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)

[geospatialem]

The above is blocked by the effort of elementInternals via #8126.

Its assumed for the above we need to programmatically set the hidden input's value on for submission, which isn't currently allowed for type="file".