I wan't to make something simmilar with this in Blazor. But I don't understand how can I get relatedTarget on focusout event.
Also seems FocusEventArgs in focus event in blazor doesn't support relatedTarget parameter
aspnetcore-8.0#custom-event-arguments
Does this limitation means that it is not recommended relay on relatedTarget parameter in Custom Argument Handler like shown in article above?
I've also tried implement this in Blazor using cancelation token + delay on hiding but it is also is not working well.
Any advise, thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="multiselect" onfocusin="focusin">
<input class="search" type="search" placeholder="search..."></input>
<div class="dropdown" tabindex="0">
<select multiple class="select">
<option>aaaa</option>
<option>bbbb</option>
<option>cccc</option>
</select>
<button class="btnOk" type="button">Select</button>
<button class="btnCancel" type="button">Cancel</button>
</div>
</div>
<script>
const btnOk = document.querySelector('.btnOk');
const btnCancel = document.querySelector('.btnCancel');
const dropdown = document.querySelector('.dropdown');
const select = document.querySelector('.select');
const search = document.querySelector('.search');
const multi = document.querySelector('.multiselect');
multi.addEventListener("focusin", focusin);
multi.addEventListener("focusout", focusout);
hide();
function focusin(event) {
show()
}
function focusout(event) {
console.log(event.relatedTarget);
if (needToHide1(event)) {
hide();
}
}
function needToHide(focusoutEvent) {
return event.relatedTarget != select
&& event.relatedTarget != search
&& event.relatedTarget != dropdown
&& event.relatedTarget != btnOk
&& event.relatedTarget != btnCancel
}
function show() {
dropdown.style.display = "block"
}
function hide() {
dropdown.style.display = "none";
}
</script>
<style>
.multiselect {
width: 300px;
font-size: 20px;
}
.select {
width: 100%;
font-size: 20px;
}
.search {
font-size: 20px;
width: 100%;
}
</style>
</body>
</html>