Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
2 tasks done
Stefei opened this issue Apr 18, 2024 · 1 comment
Open
2 tasks done

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

Stefei opened this issue Apr 18, 2024 · 1 comment
Labels
triage We discuss this topic in our internal weekly wait for response Wait for author response

Comments

@Stefei
Copy link

Stefei commented Apr 18, 2024

Prerequisites

  • I have read the Contributing Guidelines.
  • 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 Stefei added the triage We discuss this topic in our internal weekly label Apr 18, 2024
@matthiashader
Copy link
Collaborator

matthiashader commented May 7, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
triage We discuss this topic in our internal weekly wait for response Wait for author response
Projects
None yet
Development

No branches or pull requests

2 participants