Open
Description
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}
`;
}
}
Activity