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"


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)">
<!-- /ko --><!-- ko if: messages().messages && messages().messages.length > 0 -->
<!-- /ko    -->

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 -->

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

  • did you end up solving this? Nov 21, 2020 at 20:46
  • No, it still persists.
    – TheFrakes
    Nov 23, 2020 at 8:23

1 Answer 1


I resolved this issue by adding the following file: app/design/frontend/COMPANY/THEME_NAME/Magento_Ui/web/js/view/messages.js

and commenting out the onHiddenChange function at the very end.

             * @param {Boolean} isHidden

            onHiddenChange: function (isHidden) {
                var self = this;
                // Hide message block if needed
                if (isHidden) {
                    setTimeout(function () {
                        $(self.selector).hide('blind', {}, 500);
                    }, 5000);

...and refresh your caches.

  • Thanks! I modified the file and did upgrade & content deployment & refreshed all cashes. Did not resolve the issue though.
    – TheFrakes
    Dec 3, 2020 at 11:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.