Clicking a entry in a select, also triggers a click in the backdrop

[Stefei]

Prerequisites

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

What happened?

Clicking a entry in a select, will also trigger a click in the backdrop. This is a problem for us, because we use a modal that closes if the user clicks outside of the modal bounds.

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

Angular, JavaScript

Which version of iX do you use?

v2.1.0

Code to produce this issue.

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

@Component({
  selector: 'app-example',
  template: `
    <div style="background-color:#ffffff; height: 1000px" onclick="console.log('backdrop clicked')">
    <ix-select [value]="value">
      <ix-select-item label="Item 1" value="1"></ix-select-item>
      <ix-select-item label="Item 2" value="2"></ix-select-item>
      <ix-select-item label="Item 3" value="3"></ix-select-item>
      <ix-select-item label="Item 4" value="4"></ix-select-item>
    </ix-select>
  `,
})
export default class Select {
  value = '1';
}

[matthiashader]

Hello @Stefei - thanks for your insight! Actually the default webcomponents behave this way, i have provided a little stackblitz example below, if you really want to prohibit the backdrop click you can still manually configure it with stopPropagation. https://stackblitz.com/edit/ob7nug-71atcf?file=src%2Fapp%2Fselect.ts If you have any further questions, let me know :)