@@ -199,7 +199,8 @@ class FileInputImpl extends DisableableInput<FileInputImplProps, State> {
199
199
} = this . props ;
200
200
const { data, file, isDisabled, isHover } = this . state ;
201
201
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
203
204
let body ;
204
205
205
206
if ( file ) {
@@ -209,10 +210,10 @@ class FileInputImpl extends DisableableInput<FileInputImplProps, State> {
209
210
body = (
210
211
< div
211
212
className = { attachedFileClass }
212
- onDrop = { this . onDrop }
213
213
onDragEnter = { this . onDrag }
214
- onDragOver = { this . onDrag }
215
214
onDragLeave = { this . onDragLeave }
215
+ onDragOver = { this . onDrag }
216
+ onDrop = { this . onDrop }
216
217
>
217
218
< span className = "fa fa-times-circle attached-file__remove-icon" onClick = { this . onRemove } />
218
219
< span className = "fa fa-file-text attached-file--icon" />
@@ -223,23 +224,23 @@ class FileInputImpl extends DisableableInput<FileInputImplProps, State> {
223
224
} else if ( data ?. get ( 'value' ) ) {
224
225
body = (
225
226
< FileColumnRenderer
226
- isFileLink = { queryColumn ?. rangeURI === FILELINK_RANGE_URI }
227
227
data = { data }
228
+ isFileLink = { queryColumn ?. rangeURI === FILELINK_RANGE_URI }
228
229
onRemove = { isDisabled ? undefined : this . onRemove }
229
230
/>
230
231
) ;
231
232
} else {
232
233
body = (
233
234
< >
234
235
< input
235
- disabled = { this . state . isDisabled }
236
- type = "file"
237
236
className = "file-upload__input" // This class makes the file input hidden
238
- name = { inputId }
237
+ disabled = { this . state . isDisabled }
239
238
id = { inputId }
240
239
multiple = { false }
240
+ name = { name }
241
241
onChange = { this . onChange }
242
242
ref = { this . fileInput }
243
+ type = "file"
243
244
/>
244
245
245
246
{ /* 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> {
249
250
'file-upload__is-hover' : isHover && ! isDisabled ,
250
251
} ) }
251
252
htmlFor = { inputId }
252
- onDrop = { this . onDrop }
253
253
onDragEnter = { this . onDrag }
254
- onDragOver = { this . onDrag }
255
254
onDragLeave = { this . onDragLeave }
255
+ onDragOver = { this . onDrag }
256
+ onDrop = { this . onDrop }
256
257
>
257
- < i className = "fa fa-cloud-upload" aria-hidden = "true " />
258
+ < i aria-hidden = "true" className = "fa fa-cloud-upload" />
258
259
259
260
< span > Select file or drag and drop here.</ span >
260
261
< div className = "file-upload__error-message" > { this . state . error } </ div >
@@ -278,11 +279,11 @@ class FileInputImpl extends DisableableInput<FileInputImplProps, State> {
278
279
renderFieldLabel ( queryColumn )
279
280
) : (
280
281
< FieldLabel
282
+ column = { queryColumn }
283
+ isDisabled = { isDisabled }
281
284
labelOverlayProps = { labelOverlayProps }
282
285
showLabel = { showLabel }
283
286
showToggle = { allowDisable }
284
- column = { queryColumn }
285
- isDisabled = { isDisabled }
286
287
toggleProps = { {
287
288
onClick : toggleDisabledTooltip ? undefined : this . toggleDisabled ,
288
289
toolTip : toggleDisabledTooltip ,
0 commit comments