Modal without ix-* element at the top of template #2190
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?
After upgrading @siemens/ix from 3.1.0 to 3.2.0 we've discovered an issue with modals. Generally, if I don't put an ix-* element (it does not have to be modal related element, it can simply be an ix-icon-button for instance) as the very first in the template it is not working properly.
If I try to call showModal with centered it is only centered on the first interaction. Later it is not.
I am providing an example from your page with small modifications, so you can see what is the problem. Please try to remove the ix-button from the modal template and open it multiple times.
If you remove the button, first of all it is not rendering any content. Also, the first modal is opened with styles:
{ opacity: 1; transform: translateY(-50%) translateX(-50%); }
but next ones always have a different styling:
{ opacity: 1; transform: translateY(40px) translateX(-50%); }
What type of frontend framework are you seeing the problem on?
JavaScript
On which version of the frontend framework are you experiencing the issue?
Which version of iX do you use?
3,2,0
Code to produce this issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modal sizes example</title>
<link rel="stylesheet" href="./modal-sizes.css" />
</head>
<body>
<div class="modal-sizes">
<ix-button data-modal-size="360">Show modal size 360</ix-button>
</div>
<template id="modal-example-template">
<ix-button>CLICK</ix-button>
<div>hi</div>
</template>
<script type="module">
import { showModal, dismissModal } from '@siemens/ix';
function createExampleModal() {
const name = 'modal-example';
window.customElements.define(
name,
class extends HTMLElement {
isInitalRender = false;
constructor() {
super();
this.size = '360';
}
connectedCallback() {
if (this.isInitalRender) {
return;
}
this.isInitalRender = true;
this.firstRender();
}
firstRender() {
const modalTemplate = document.getElementById(
'modal-example-template'
);
const template = modalTemplate.content.cloneNode(true);
const button = template.querySelector('ix-button');
button.innerText = `Modal with size ${this.size}`;
button.addEventListener('click', () => dismissModal(this));
this.append(template);
}
}
);
return name;
}
(async function () {
const exampleModalName = createExampleModal();
await window.customElements.whenDefined('ix-button');
const buttons = document.querySelectorAll('ix-button');
buttons.forEach((button) =>
button.addEventListener('click', async () => {
const customModal = document.createElement(exampleModalName);
customModal.size = button.getAttribute('data-modal-size');
const modal = await showModal({
content: customModal,
size: customModal.size,
centered: true,
});
})
);
})();
</script>
<script type="module" src="./init.js"></script>
</body>
</html>