[Bug] Drop label renders on top of file list if element isn't visible on initialization and using compact layout

[jacksleight]

Is there an existing issue for this?

• [X] I have searched the existing issues

Have you updated FilePond and its plugins?

• [x] I have updated FilePond and its plugins

Describe the bug

If the FilePond element isn't visible (within a display: none element) when it initalizes, the UI does not render correctly. Specifically the drop label element does not get hidden. When using the compact panel layout this causes the drop label to appear on top of the files list, which prevents you from clicking the remove button.

I think this might be the same problem as mentioned in this closed issue: https://github.com/pqina/filepond/issues/574

Reproduction

I have created a CodePen that demonstrates this issue: https://codepen.io/jacksleight/pen/wvpoqpw

Let the page load, then click the button to reveal the hidden element. The revealed FilePond instance has the drop label on top, and the remove button can't be clicked:

Environment

- Device: MacBook
- OS: macOS 12.1
- Browser: Chrome 99

[rikschennink]

FilePond is constantly determining its size, if it's set to display none it has zero size and sometimes it doesn't know how to deal with that.

I'd advise to use visibility: hidden and height: 0 instead for now.

<div style="visibility: hidden;height: 0;" id="hidden">
  <input type="file" id="filepond2">
</div>

<button type="button" onclick="document.getElementById('hidden').style.visibility = 'visible'; height: auto;">Reveal Hidden Instance</button>

[jgauna]

I tried this solution but it seems to be randomly rendering as it wants. Sometimes the filepond browse button works and sometimes it doesn't. Is there any solution to this? It's so frustrating.

This is my markup

<ons-row class="dboyScorePanel">
  <ons-col class=" dboyScorePanelCol" vertical-align="top">
    <div class="is-visible scoringDboyContainer">
      <select class="dboyScoreCategorySelect">
        <option class="textCentered" value="1">Blah 1</option>
        <option class="textCentered" value="2">Blah 2</option>
        <option class="textCentered" value="3">Blah 3</option>
      </select>

      <textarea rows='1' class="descriptionInput" placeholder="Detalles" rows="6" autocomplete="off" minlength="20" maxlength="140"></textarea>
      <input class="dboyIncidences" type="file" />
      <ons-button class="confirmScoreButton button">Confirmar</ons-button>
    </div>
  </ons-col>
</ons-row>

Where is-visible is the css class added for showing the item inside the accordion

And this is my js

        FilePond.registerPlugin(FilePondPluginFileRename);
        FilePond.setOptions({
          fileRenameFunction: (file) => {
            return 'inc_' + username + '_' + Math.random().toString(36).substring(5) + file.extension;
          }
        });
        // Create Input
        self.pond = FilePond.create(self.ui.dboyIncidences[0], {
          allowMultiple: true,
          allowBrowse: true,
          maxFiles: 4,
          allowDrop: true,
          labelIdle: 'Arrastra los archivos acá ó <span class="filepond--label-action"> Buscá en la pc </span>',
          labelTapToUndo: null,
          labelFileProcessing: 'Subiendo archivo ...',
          labelFileProcessingComplete: 'Archivo subido con éxito',
          labelFileProcessingAborted: 'Subida cancelada',
          labelFileProcessingError: 'Error con el archivo',
          labelTapToCancel: 'Click para cancelar',
          labelTapToRetry: 'Click para reintentar',
          instantUpload: false,
          allowProcess: false,
          server: {
            process: app.appConfig.baseURL + 'dboy/uploadScoreFiles',
            fetch: null,
            revert: null,
            restore: null,
            load: null,
            withCredentials: true,
            headers: {
              'Authorization': 'Bearer ' + authToken
            }
          }
        });

This is the random result

Expected:

Bug:

Update 1:

There's a super strange behaviour. If the plugin is not rendered correctly I could move to another browser's tab and come back and it works

[rikschennink]

@jgauna If it's rendered for the first time it should have a display size. It's unclear if that is the case, and/or if the is-visible class affects the display or visibility CSS property.

[anthonygore]

I had this issue in a Vue app when I was conditionally showing a filepond instance in compact mode. Solution was to use v-if instead of v-show i.e. re-rendering rather than hiding/showing using CSS.