https://i.stack.imgur.com/09dcf.png
Upon clicking the first input cell, the popup opens and closes as expected. However, when closing the initial input and opening another one, an orange mark icon appears but the popup doesn't open until the second click. This issue is present across all input cells, where the popup only opens after the single click. Any help in resolving this matter would be greatly appreciated.
The functionality to close the popup by clicking outside of it is working correctly.
Component file ->
<tr v-for="(row, index) in table" :key="index">
<td class="dot_td">
<img :src="row.cell1.imgSrc" />
</td>
<th v-html="row.cell2.content">
</th>
<td v-for="inputCell in row.inputCells" :key="inputCell.input" :class="inputCell.rectification === 1 ? 'border_td' : ''">
<input v-bind="inputCell.input" :value="inputCell.inputData">
<a style="cursor: pointer;" class="request_icon" @click="openPopup($event, inputCell)">
<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.5 6.5C13.5 9.77946 10.6254 12.5 7 12.5C3.37461 12.5 0.5 9.77946 0.5 6.5C0.5 3.22054 3.37461 0.5 7 0.5C10.6254 0.5 13.5 3.22054 13.5 6.5Z"
stroke="#CDCDCD" />
<path d="M6.46866 10V4.54545H7.53045V10H6.46866ZM7.00488 3.70384C6.82022 3.70384 6.66161 3.64228 6.52903 3.51918C6.39882 3.3937 6.33372 3.24455 6.33372 3.07173C6.33372 2.89654 6.39882 2.7474 6.52903 2.62429C6.66161 2.49882 6.82022 2.43608 7.00488 2.43608C7.18954 2.43608 7.34698 2.49882 7.47718 2.62429C7.60976 2.7474 7.67605 2.89654 7.67605 3.07173C7.67605 3.24455 7.60976 3.3937 7.47718 3.51918C7.34698 3.64228 7.18954 3.70384 7.00488 3.70384Z"
fill="#CDCDCD" />
</svg>
</a>
</td>
<td>
{{ row.totalCell.text }}
</td>
</tr>
Script ->
<script setup>
const openPopup = (event, inputCell) => {
const iconbtn = event.currentTarget;
const popup = document.getElementById('request_popup');
userComment.value = inputCell.commentData;
UsercommentDate.value = inputCell.UsercommentDate;
currentInputCell.value = inputCell;
managerComment.value = inputCell.Managercomment;
isPopupVisible.value = !isPopupVisible.value;
const rect = iconbtn.getBoundingClientRect();
if (isPopupVisible.value) {
iconbtn.classList.add('requested');
popupStyle.top = rect.bottom + window.scrollY + 'px';
popupStyle.left = rect.left + window.scrollX + 'px';
// Adding an event listener to close the popup on outside click
const closePopupOnOutsideClick = (event) => {
const isClickInsidePopup = iconbtn.contains(event.target) || popup.contains(event.target);
if (!isClickInsidePopup) {
closePopup(iconbtn);
document.removeEventListener('click', closePopupOnOutsideClick);
}
};
document.addEventListener('click', closePopupOnOutsideClick);
}else{
isPopupVisible.value = false;
iconbtn.classList.remove('requested');
}
};
const closePopup = (iconbtn) => {
isPopupVisible.value = false;
if(iconbtn){
iconbtn.classList.remove('requested');
}
};
<script>