I am using the Drupal.messages JS API in the
Entity Form Monitor module →
. I have an issue that when I add an 'error' message type, when there is an existing status message on the page, the messages get bundled together instead of styled separately, so my error message kind of looks like a success message.
// Display a warning message on the form.
const messages = new Drupal.Message();
messages.add(
Drupal.t('The form has become outdated. Copy any unsaved work in the form below and then <a href="!url">reload this page</a>', { '!url': window.location }),
{ type: 'error' }
);
Actual Result:
→
<div data-drupal-messages="" class="messages-list">
<div role="contentinfo" aria-labelledby="message-status-title" class="messages-list__item messages messages--status">
<div class="messages__header">
<h2 id="message-status-title" class="messages__title">
Status message
</h2>
</div>
<div class="messages__content">
CSS and JavaScript cache cleared.
</div>
<div class="messages messages--error" role="alert" aria-labelledby="error-632206106470448-title" data-drupal-message-id="error-632206106470448" data-drupal-message-type="error">
<div class="messages__header">
<h2 id="error-632206106470448-title" class="messages__title">
Error message
</h2>
</div>
<div class="messages__content">
The form has become outdated. Copy any unsaved work in the form below and then <a href="http://90.drupal.test/node/1/edit?destination=/admin/content">reload this page</a>
</div>
</div>
</div>
</div>
The problem is that the error message is added inside of the <div role="contentinfo" aria-labelledby="message-status-title" class="messages-list__item messages messages--status"> div. If I close that div before the error message, then it works correctly.
Expected Result:
→
<div data-drupal-messages="" class="messages-list">
<div role="contentinfo" aria-labelledby="message-status-title" class="messages-list__item messages messages--status">
<div class="messages__header">
<h2 id="message-status-title" class="messages__title">
Status message
</h2>
</div>
<div class="messages__content">
CSS and JavaScript cache cleared.
</div>
</div> <!-- This is the closing div needed -->
<div class="messages messages--error" role="alert" aria-labelledby="error-632206106470448-title" data-drupal-message-id="error-632206106470448" data-drupal-message-type="error">
<div class="messages__header">
<h2 id="error-632206106470448-title" class="messages__title">
Error message
</h2>
</div>
<div class="messages__content">
The form has become outdated. Copy any unsaved work in the form below and then <a href="http://90.drupal.test/node/1/edit?destination=/admin/content">reload this page</a>
</div>
</div>
</div>
