Skip to content

Magento 2.4 decline message disappears quickly – several quick fixes don’t to the trick

I have a problem on my updated Magento 2.4 store. The error messages (like insufficient stock amount) disappear after a short time. Instead, I want them to be visible until the customer clicks on them. This should be standard behaviour in my opinion for error messages!

I checked the issue here, but the fix here did not work / the file is now different on Magento 2.4.

The overrides for vendor/magento/module-ui/view/frontend/web/template/messages.html did not work (source). I have changed the file from

div data-role=”checkout-messages” class=”messages”
data-bind=”visible: isVisible(), click: removeAll”

to

div data-role=”checkout-messages” class=”messages” data-bind=”click: removeAll”>

Also, I did the suggested override for vendor/magento/module-ui/view/frontend/web/js/view/messages.js: I changed the values for the timeout

return Component.extend({
    defaults: {
        template: 'Magento_Ui/messages',
        selector: '[data-role=checkout-messages]',
        isHidden: false,
        hideTimeout: 30000,
        hideSpeed: 10000,
        listens: {
            isHidden: 'onHiddenChange'
        }
    },

I did the required bin/magento setup:upgrade and double checked every edit. Still, whenever there is an alert message, it disappears after a very short period of time. The annoying thing is, that it is not about styling or visibility, the whole message just disappears from the code.

For every success message, the structure is like this:

<div data-bind="scope: 'messages'"> 
<!-- ko if: cookieMessages &&
cookieMessages.length > 0 --> 
<div role="alert" data-bind="foreach: {
data: cookieMessages, as: 'message' }" class="messages"> <div
data-bind="attr: { class: 'message-' + message.type + ' ' +
message.type + ' message', 'data-ui-id': 'message-' + message.type }"
class="message-success success message" data-ui-id="message-success">
<div data-bind="html: $parent.prepareMessageForHtml(message.text)">
[MESSAGE  TEXT].
</div> 
</div> 
</div> 
<!-- /ko --><!-- ko if: messages().messages && messages().messages.length > 0 -->
<!-- /ko    -->
</div>

However when there is an error, there is just the wrapper class, so the whole HTML disappears:

<div data-bind="scope: 'messages'">
<!-- ko if: cookieMessages && cookieMessages.length > 0 -->
<!-- /ko -->
<!-- ko if: messages().messages && messages().messages.length > 0 -->
<!-- /ko -->
</div>

For me, this is rather unusual and not elegantly solved. How do I prevent the message from being vanished?