Issue 53394: FileInput revert removal of the "-fileUpload" suffix from inputId

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "6.53.2",
+  "version": "6.53.3",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

packages/components/releaseNotes/components.md

@@ -1,6 +1,10 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages
 
+### version 6.53.3
+*Released*: 7 July 2025
+- Issue 53394: FileInput revert removal of the "-fileUpload" suffix from inputId
+
 ### version 6.53.2
 *Released*: 3 July 2025
 * Issue 53141: Should set a dirty bit when setting or updating the hit selection criteria for an assay

packages/components/src/internal/components/forms/input/FileInput.tsx

@@ -199,7 +199,8 @@ class FileInputImpl extends DisableableInput<FileInputImplProps, State> {
         } = this.props;
         const { data, file, isDisabled, isHover } = this.state;
 
-        const inputId = this.getInputName();
+        const name = this.getInputName();
+        const inputId = `${name}-fileUpload`; // Issue 53394: needs to be a distinct input id so it doesn't collide with other elements on the page for this fieldKey
         let body;
 
         if (file) {
@@ -209,10 +210,10 @@ class FileInputImpl extends DisableableInput<FileInputImplProps, State> {
             body = (
                 <div
                     className={attachedFileClass}
-                    onDrop={this.onDrop}
                     onDragEnter={this.onDrag}
-                    onDragOver={this.onDrag}
                     onDragLeave={this.onDragLeave}
+                    onDragOver={this.onDrag}
+                    onDrop={this.onDrop}
                 >
                     <span className="fa fa-times-circle attached-file__remove-icon" onClick={this.onRemove} />
                     <span className="fa fa-file-text attached-file--icon" />
@@ -223,23 +224,23 @@ class FileInputImpl extends DisableableInput<FileInputImplProps, State> {
         } else if (data?.get('value')) {
             body = (
                 <FileColumnRenderer
-                    isFileLink={queryColumn?.rangeURI === FILELINK_RANGE_URI}
                     data={data}
+                    isFileLink={queryColumn?.rangeURI === FILELINK_RANGE_URI}
                     onRemove={isDisabled ? undefined : this.onRemove}
                 />
             );
         } else {
             body = (
                 <>
                     <input
-                        disabled={this.state.isDisabled}
-                        type="file"
                         className="file-upload__input" // This class makes the file input hidden
-                        name={inputId}
+                        disabled={this.state.isDisabled}
                         id={inputId}
                         multiple={false}
+                        name={name}
                         onChange={this.onChange}
                         ref={this.fileInput}
+                        type="file"
                     />
 
                     {/* We render a label here so click and drag events propagate to the input above */}
@@ -249,12 +250,12 @@ class FileInputImpl extends DisableableInput<FileInputImplProps, State> {
                             'file-upload__is-hover': isHover && !isDisabled,
                         })}
                         htmlFor={inputId}
-                        onDrop={this.onDrop}
                         onDragEnter={this.onDrag}
-                        onDragOver={this.onDrag}
                         onDragLeave={this.onDragLeave}
+                        onDragOver={this.onDrag}
+                        onDrop={this.onDrop}
                     >
-                        <i className="fa fa-cloud-upload" aria-hidden="true" />
+                        <i aria-hidden="true" className="fa fa-cloud-upload" />
                         &nbsp;
                         <span>Select file or drag and drop here.</span>
                         <div className="file-upload__error-message">{this.state.error}</div>
@@ -278,11 +279,11 @@ class FileInputImpl extends DisableableInput<FileInputImplProps, State> {
                     renderFieldLabel(queryColumn)
                 ) : (
                     <FieldLabel
+                        column={queryColumn}
+                        isDisabled={isDisabled}
                         labelOverlayProps={labelOverlayProps}
                         showLabel={showLabel}
                         showToggle={allowDisable}
-                        column={queryColumn}
-                        isDisabled={isDisabled}
                         toggleProps={{
                             onClick: toggleDisabledTooltip ? undefined : this.toggleDisabled,
                             toolTip: toggleDisabledTooltip,