Message bar is only invisible after dismissing but still usable

[AnnaGrahl]

Prerequisites

• I have read the Contributing Guidelines.
• I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

We implemented the error message bar with the button to dimiss it. But it happens, that it is invisible, but if you keep clicking on the spot, where the dismiss button is, it appears again and again for a short time after getting invisible again.

I also looked in the chrome dev tools and it seems, that only the opacity of the message bar is set to 0%. But dismiss would mean for me, that the message bar is removed from the dom, or the bar is not set to opacity 0% so the developer sees, that it is NOT away and you have to implement the event yourself.

What type of frontend framework are you seeing the problem on?

Angular

Which version of iX do you use?

v2.5.0

Code to produce this issue.

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div class="message-bar">
      <ix-message-bar>Message text</ix-message-bar>
      <ix-message-bar type="warning">Message text</ix-message-bar>
      <ix-message-bar type="danger">
        <div class="d-flex align-items-center justify-content-between">
          Message text
          <ix-button>Action</ix-button>
        </div>
      </ix-message-bar>
    </div>
  `,
  styleUrls: ['./message-bar.css'],
})
export default class MessageBar {}

[github-actions]

🤖 Hello @AnnaGrahl

Your issue will be analyzed and is part of our internal workflow.
To get informed about our workflow please checkout the Contributing Guidelines

JIRA: IX-2201