FileUpload doesn't open Filechooser when I click it the first time

[corsin-ragettli]

Please only report technical bugs. Clarify design issues in the slack channel #ux-ui-support.

When I click the FileUpload on the first time it doesn't open the Filechooser; I have to click it two times.

Expected Behavior

Open the Filechooser on the first click

Current Behavior

It doesn't open the Filechooser on the first click.

Steps to Reproduce

1. Use Version 8.0.1 of File-Upload
2. Create the component
3. Click on it

Context (Environment)

Version 5.0.1 works with the same code (changed onChange because of API changes ofc). Doesn't work on 8.0.1.

[MKaHead]

Unfortunately I cannot reproduce the error see here even with version 8.0.1. What does your config of file upload look like?

[corsin-ragettli]

I wrapped it in a react-component to abstract some common code into a single place. Maybe this is the reason why the file-upload doesn't get "focused" correctly. Currently version 8.1.0 doesn't work for me... Code:

const UploadFile = (props) => {
    const { intl, category, onChange, invalid, invalidMessage } = props;

    /**
     *
     * @param{File} file
     * @param{number} index
     * @return{Promise<NewFiles>}
     */
    const mutateFile = (file) => {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onerror = reject;

            reader.onload = (e) => {
                const [name, type] = file.name.split('.');
                const f = e.target.result;
                resolve({
                    file: f.substring(f.indexOf(';base64,') + 8, f.length),
                    name,
                    documentType: type,
                    fileSize: file.size,
                    category,
                });
            };

            reader.readAsDataURL(file);
        });
    };

    /**
     *
     * @param{Array<File>} files
     * @return {Promise<Array<NewFiles>>}
     */
    const handleChange = async (files) => {
        return await Promise.all(files.map((f) => mutateFile(f)));
    };

    return (
        <>
            <AXAFileUpload
                onChange={(files) => {
                    handleChange(files)
                        .then(onChange)
                        .catch(() => {
                            onChange(undefined);
                        });
                }}
                maxSizeOfAllFilesKB={163840}
                maxSizeOfSingleFileKB={8192}
                maxNumberOfFiles={20}
                allowedFileTypes={
                    'application/vnd.openxmlformats-officedocument.wordprocessingml.document, ' +
                    'application/pdf, application/msword, application/msexcel, ' +
                    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, ' +
                    'application/mspowerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation, ' +
                    'application/vnd.ms-outlook, text/plain, text/rtf, image/tiff, image/tif, image/jpg, image/jpeg, image/png'
                }
                deleteStatusText={intl.formatMessage({
                    id: 'kred.glob_delete',
                    defaultMessage: 'Löschen',
                })}
                addStatusText={intl.formatMessage({
                    id: 'kred.glob_add',
                    defaultMessage: 'Hinzufügen',
                })}
                fileTooBigStatusText={intl.formatMessage({
                    id: 'kred.error_upload_size_single',
                    defaultMessage: 'Das Dokument übersteigt die zulässige Grösse.',
                })}
                filesTooBigStatusText={intl.formatMessage({
                    id: 'kred.error_upload_size_multiple',
                    defaultMessage: 'Die Dokumente übersteigen die zulässige Grösse.',
                })}
                tooManyFilesStatusText={intl.formatMessage({
                    id: 'kred.claim_error_upload_full',
                    defaultMessage: 'Keine weiteren Unterlagen mehr möglich.',
                })}
                inputFileText={intl.formatMessage({
                    id: 'kred.claim_doc_choice',
                    defaultMessage: 'Unterlagen auswählen',
                })}
                orText={intl.formatMessage({
                    id: 'kred.glob_or',
                    defaultMessage: 'oder',
                })}
                infoText={intl.formatMessage({
                    id: 'kred.claim_doc_target',
                    defaultMessage: 'Unterlagen hierher ziehen',
                })}
                wrongFileTypeText={intl.formatMessage({
                    id: 'kred.claim_error_filtetype_text',
                    defaultMessage: 'Dieser Dokument-Typ ist nicht zulässig.',
                })}
                wrongFileTypeStatusText={intl.formatMessage({
                    id: 'kred.claim_error_filtetype_text',
                    defaultMessage: 'Dieser Dokument-Typ ist nicht zulässig.',
                })}
            />
            {invalid && invalidMessage}
        </>
    );
};

When not using the wrapped component it works fine for me aswell, so it must be something in the wrapped component, but I can't imagine what since I don't manipulate the FileUpload in any way..