ix icon indicating copy to clipboard operation
ix copied to clipboard

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

Open Stefei opened this issue 10 months ago • 1 comments

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';
}

Stefei avatar Apr 18 '24 06:04 Stefei

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

matthiashader avatar May 07 '24 12:05 matthiashader

We will close this issue. If it still persists, don't hesitate to open a new issue!

matthiashader avatar Aug 22 '24 08:08 matthiashader