:active disappears immediately on a div - css

Question

I want to display a pop-up when I click on my div.
Here is my html code :
<div class="test">
<!-- <input class="input input-readonly" type="text" placeholder="Code" [value]="id" readonly>-->
<div class="test input input-readonly">{{gameId}}</div>
<div class="test__popup">
<a [cdkCopyToClipboard]="id">{{'ID' | translate}}</a>
<a [cdkCopyToClipboard]="link">{{'LINK' | translate}}</a>
</div>
</div>
Mon fichier scss :
.test {
position: relative;
input {
cursor: pointer;
user-select: none;
}
&__popup {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
width: max-content;
padding: 10px;
background-color: $color-white;
box-shadow: $shadow-default;
flex-direction: column;
border-radius: 8px;
display: none;
a {
color: $color-primary-dark;
transition: color 100ms;
padding: 4px 0;
&:hover {
color: $color-primary-light;
}
}
}
&:focus-within .test__popup,
&:active .test__popup {
display: flex;
background-color: yellow;
}
}
In my HTML code I commented an input with the same class as my div. It works for my input but for my div when I click on it, the popup appears but disappears directly.
How to reproduce the same effect as with my input, ie my popup remains on the screen as long as I have not clicked elsewhere.