IX-Modal window closes unexpectedly on MouseDown in the modal and MouseUp on the backdrop.

[etmcpham]

Prerequisites

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

What happened?

Modal window closes unexpectedly when 'mousedown' IN the modal and 'mouseup' on the backdrop. I'm not sure if that is intended behavior. A user could for example mark the text in an input field on that modal and accidentally release LMB outside of the modal(on the backdrop).

A possible solution is to modify the ix-modal's render method and switch the onClick with the onMouseDown:

}, onClose: () => this.dismissModal(), onMouseDown: (event) => this.onModalClick(event), onCancel: (e) => {

I have already tested this and this seems to solve the issue, the only thing is I don't know if that messes up anything else.

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

JavaScript

Which version of iX do you use?

2.6.0

Code to produce this issue.

import { LitElement, html, css, property } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('my-modal-component')
export class MyModalComponent extends LitElement {
  @property({ type: Boolean }) isOpen = false;
  @property({ type: String }) inputValue = '';

  static styles = css`
    ix-modal {
      --modal-width: 400px;
    }
    .modal-content {
      padding: 1em;
    }
    .modal-footer {
      display: flex;
      justify-content: flex-end;
      padding: 1em;
    }
  `;

  private openModal() {
    this.isOpen = true;
  }

  private closeModal() {
    this.isOpen = false;
  }

  private handleInputChange(event: Event) {
    const target = event.target as HTMLInputElement;
    this.inputValue = target.value;
  }

  private handleSubmit() {
    console.log('Input Value:', this.inputValue);
    this.closeModal();
  }

  protected override render() {
    return html`
      <button @click="${this.openModal}">Open Modal</button>

      ${this.isOpen
        ? html`
            <ix-modal
              header="My Modal"
              @closed="${this.closeModal}"
              open
            >
              <div class="modal-content">
                <label for="modal-input">Enter something:</label>
                <input
                  id="modal-input"
                  type="text"
                  .value="${this.inputValue}"
                  @input="${this.handleInputChange}"
                />
              </div>
              <div class="modal-footer">
                <button @click="${this.closeModal}">Cancel</button>
                <button @click="${this.handleSubmit}">Submit</button>
              </div>
            </ix-modal>
          `
        : nothing}
    `;
  }
}

[github-actions]

Thank you for creating this issue! It has been labeled as needs reproduction.

To help us assist you better, could you please provide a way for us to access the code (such as a GitHub repository or a StackBlitz link). Without a reliable code reproduction, it might be challenging for us to resolve the issue, and we may have to close it.
Thank you for your understanding!