Error message displaying "Hide" but no action

Created on 21 October 2024, 9 months ago

Problem/Motivation

I am still experiencing the error status message not able to close/hide as intended. When uploading a unsupported image file extension, the Error status message appears with the Hide text un-clickable (see attached image)

Steps to reproduce

When uploading a non-.svg or .png formatted image (i.e. jpeg), an error message pops up with a Hide text. The Hide text is not clickable or has any action.

🐛 Bug report
Status

Active

Component

Code

Created by

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

Comments & Activities

  • Issue created by @chadwickked
  • 🇨🇭Switzerland saschaeggi Zurich

    It looks like the library and CSS styles do not get loaded in your example (hence the unstyled Hide button. What module are you using? Is it displaying a core message (instance of core/drupal.message)?

    If that's the case we'll need the steps how to reproduce this issue, as I tested this quickly with regular/ajax messages and can't reproduce it so far. Also it might not work as expected in a sub theme of Gin.

  • Hi @saschaeggi, thanks for the reply. Sorry in advance for my naivety.

    I'm using the Config Pages module. It looks like it's not using the core message? The error message isn't using the Gin theme as expected according to the code.

    I'm see that the error message displaying "The file could not be uploaded" (see attached image) is coming from web/core/modules/file/file.module. Not sure if it's something in there.

    We are using a sub theme of Gin, could that possible be the reason why it's not working?

  • Status changed to Closed: outdated 3 months ago
  • 🇨🇭Switzerland saschaeggi Zurich

    That could be, we generally do not officially support sub theming.

    I'm closing this as there wasn't any recent activity.

  • Status changed to Active 9 days ago
  • 🇧🇾Belarus gun_dose

    I have the same problem. I made a small investigation and found the reason of problem: this error message is rendered in '#prefix" of form element. And status-messages.html.twig renders close button as button tag. But renderer cuts this tag off from markup:

    The biggest problem for me is that "Hide" text lost all wrappers and I can't just hide this with CSS.

    I think, we can apply one of the following approaches:

    1. Wrap button in some div with some class and just hide it's content when it doesn't contain button
    2. Wrap button in some div with some class and attach some js that will turn button tag back and attach event listeners
    3. Dig deeper and try to do something to force Drupal Core to keep button tags in prefixes
  • 🇩🇪Germany jurgenhaas Gottmadingen

    I'm still wondering how this could be reproduced. Without that, there's nothing we can do about it.

  • 🇧🇾Belarus gun_dose

    @jurgenhaas, in my case it is form with `managed_file` element. Upload any file that doesn't pass validation and you will get an error directly above the file element. You don't need to submit the form, because managed_file element is ajaxified by default

  • 🇩🇪Germany jurgenhaas Gottmadingen

    @gun_dose I can't reproduce that. Here is the screenshot of the message and the markup. That seems to be as intended.

    It could be that some other module is altering the output?

Production build 0.71.5 2024