Skip to content

Commit 0901e05

Browse files
authored
Issue 53394: FileInput revert removal of the "-fileUpload" suffix from inputId (#1825)
### version 6.53.3 *Released*: 7 July 2025 - Issue 53394: FileInput revert removal of the "-fileUpload" suffix from inputId
1 parent 258bdc3 commit 0901e05

File tree

4 files changed

+20
-15
lines changed

4 files changed

+20
-15
lines changed

packages/components/package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

packages/components/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@labkey/components",
3-
"version": "6.53.2",
3+
"version": "6.53.3",
44
"description": "Components, models, actions, and utility functions for LabKey applications and pages",
55
"sideEffects": false,
66
"files": [

packages/components/releaseNotes/components.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
# @labkey/components
22
Components, models, actions, and utility functions for LabKey applications and pages
33

4+
### version 6.53.3
5+
*Released*: 7 July 2025
6+
- Issue 53394: FileInput revert removal of the "-fileUpload" suffix from inputId
7+
48
### version 6.53.2
59
*Released*: 3 July 2025
610
* 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

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,8 @@ class FileInputImpl extends DisableableInput<FileInputImplProps, State> {
199199
} = this.props;
200200
const { data, file, isDisabled, isHover } = this.state;
201201

202-
const inputId = this.getInputName();
202+
const name = this.getInputName();
203+
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
203204
let body;
204205

205206
if (file) {
@@ -209,10 +210,10 @@ class FileInputImpl extends DisableableInput<FileInputImplProps, State> {
209210
body = (
210211
<div
211212
className={attachedFileClass}
212-
onDrop={this.onDrop}
213213
onDragEnter={this.onDrag}
214-
onDragOver={this.onDrag}
215214
onDragLeave={this.onDragLeave}
215+
onDragOver={this.onDrag}
216+
onDrop={this.onDrop}
216217
>
217218
<span className="fa fa-times-circle attached-file__remove-icon" onClick={this.onRemove} />
218219
<span className="fa fa-file-text attached-file--icon" />
@@ -223,23 +224,23 @@ class FileInputImpl extends DisableableInput<FileInputImplProps, State> {
223224
} else if (data?.get('value')) {
224225
body = (
225226
<FileColumnRenderer
226-
isFileLink={queryColumn?.rangeURI === FILELINK_RANGE_URI}
227227
data={data}
228+
isFileLink={queryColumn?.rangeURI === FILELINK_RANGE_URI}
228229
onRemove={isDisabled ? undefined : this.onRemove}
229230
/>
230231
);
231232
} else {
232233
body = (
233234
<>
234235
<input
235-
disabled={this.state.isDisabled}
236-
type="file"
237236
className="file-upload__input" // This class makes the file input hidden
238-
name={inputId}
237+
disabled={this.state.isDisabled}
239238
id={inputId}
240239
multiple={false}
240+
name={name}
241241
onChange={this.onChange}
242242
ref={this.fileInput}
243+
type="file"
243244
/>
244245

245246
{/* 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> {
249250
'file-upload__is-hover': isHover && !isDisabled,
250251
})}
251252
htmlFor={inputId}
252-
onDrop={this.onDrop}
253253
onDragEnter={this.onDrag}
254-
onDragOver={this.onDrag}
255254
onDragLeave={this.onDragLeave}
255+
onDragOver={this.onDrag}
256+
onDrop={this.onDrop}
256257
>
257-
<i className="fa fa-cloud-upload" aria-hidden="true" />
258+
<i aria-hidden="true" className="fa fa-cloud-upload" />
258259
&nbsp;
259260
<span>Select file or drag and drop here.</span>
260261
<div className="file-upload__error-message">{this.state.error}</div>
@@ -278,11 +279,11 @@ class FileInputImpl extends DisableableInput<FileInputImplProps, State> {
278279
renderFieldLabel(queryColumn)
279280
) : (
280281
<FieldLabel
282+
column={queryColumn}
283+
isDisabled={isDisabled}
281284
labelOverlayProps={labelOverlayProps}
282285
showLabel={showLabel}
283286
showToggle={allowDisable}
284-
column={queryColumn}
285-
isDisabled={isDisabled}
286287
toggleProps={{
287288
onClick: toggleDisabledTooltip ? undefined : this.toggleDisabled,
288289
toolTip: toggleDisabledTooltip,

0 commit comments

Comments
 (0)