The close button overlaps with filter field in filespicker popup

[annucy]

We have integrated filestack-js to our react js project. When file picker popup to select files is opened, the close button at the top right corner overlaps with filter field to the left of it.

Expected Behavior

The Close button on the popup should not overlap with filter field

Current Behavior

The Close button is overlapping with the filter field

Possible Solution

Steps to Reproduce (for bugs)

1. Integrate filestack as per the documentation.
2. Invoke filestack popup for file upload
3. Choose a file to upload
4. In the popup, the UI is shown with close button overlapped with the filter field. Attached a screen shot.

Code for integration:

static uploadProject(uploadCallback, errorCallback) {
const client = filestack.init('KEY');
const options = {
fromSources: ['local_file_system'],
maxFiles: 1,
accept: ['video/mp4', 'video/quicktime', 'video/x-msvideo'],
storeTo: {
location: 's3',
},
uploadConfig: {
retry: 5,
timeout: 60000
},
onFileSelected: (file) => {
console.log(TAG + ' onFileSelected: ', file)
if (file.size > 5 * 1000 * 1000 * 1000) {
return Promise.reject('File size exceeds 5GB limit')
}
},
acceptFn: (file, options) => {
return options.mimeFromMagicBytes(file.originalFile).then((res) => {
const mimeFromMagicBytes = res
const mimeTypeFromExtn = options.mimeFromExtension(file.originalFile.name)
console.log('res', res, mimeTypeFromExtn);
if (options.accept && options.accept.length > 0) {
if (!(options.accept.includes(mimeFromMagicBytes) || options.accept.includes(mimeTypeFromExtn))) {
return Promise.reject('Supported file formats are .mp4, .mov and .avi')
}
}
});
},
onUploadStarted: () => {
console.log(TAG + ' Upload Started')
},
onFileUploadProgress: (data, event) => {
console.log(TAG + ' onFileUploadProgress' + event.totalBytes + ' ' + event.totalPercent)
},
onClose: (data) => {
console.log(TAG + ' onClose', data)
},
onUploadDone: (uploadResponse) => {
console.log(TAG + ' onUploadDone', uploadResponse)
uploadCallback(uploadResponse)
},
onFileUploadFailed: (pickerFileMetadata, error) => {
errorCallback(pickerFileMetadata, error)
}
};
client.picker(options).open();
}

Additional Screenshots

Context

Your Environment

• Version used: "filestack-js": "^3.25.0",
• Browser Name and version: Chrome, Version 113.0.5672.126 (Official Build) (arm64)
• Operating System and version (desktop or mobile): M1 MacBook Pro, Mac OS - Ventura 13.0.1

[annucy]

Can you please provide an update on this?

[r-akhma]

For some reason, the window title is not displaying :(

Broken since version 3.25

[makc9]

I see the same behavior