Contrib.social

File field input styling/markup lost after files are removed

Open on Drupal.org →
Created on 8 June 2022, almost 3 years ago
Updated 13 November 2023, over 1 year ago

Problem/Motivation

#3279298: Support for USWDS file input field → provided the appropriate template for a file upload field to look really nice. When the files are added and then removed, however, you get back the default upload field. It is certainly possible that this is something wrong in my subtheme, but wanted to report anyway.

Steps to reproduce

- Add a file field to a content type
- Visit node form and note the lovely USWDS interface for file fields
- Add a file or files and remove it/them
- Standard browser input field now displayed instead of the nicer USWDS one

Proposed resolution

Not certain as I'm not too up on the ajax behaviors stuff, but here is what I do know. There is additional markup added to the file field, which is the bit that makes the styling get applied

<div class="usa-file-input">
  <div class="usa-file-input__target">
    <div class="usa-file-input__instructions" aria-hidden="true">
      <span class="usa-file-input__drag-text">Drag files here or </span><span class="usa-file-input__choose">choose from folder</span>.
    </div>
    <div class="usa-file-input__box"></div>
    (INPUT ELEMENT HERE)
  </div>
</div>

I believe this happens with uswds.js when buildFileInput() is called but it seems to not get called again once the files are removed, so the markup which is needed for the USWDS theming us missing and results in the standard file input field.

🐛 Bug report
Status

Closed: won't fix

Version

2.13

Component

User interface

Created by

🇺🇸United States scotwith1t Birmingham, AL

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment about 2 years ago →
    🇺🇸United States devkinetic

    There are multiple issues with USWDS JS not being run again after page load. Another example of that would be trying to place a modal/accordion within a custom block. When BigPipe is enabled, the block is lazy loaded, and the JS does not fire, even when trying to call it within a behavior. I haven't yet looked into why accordions work within the mobile menu, which is a variant of a modal. Not sure if Drupal skips lazy loading on menu blocks. Food for thought!

  • Status changed to Closed: won't fix over 1 year ago
  • Comment over 1 year ago →
    🇺🇸United States mferanda

    Closing this out since it appears to be an issue related to Drupal Core.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024