Is there a way to make it like dropdown menu
so that Dropdown (select) disappears as soon as I click outside the input or select, and at the same time the select remains open when I put focus from input to select?
I expect that this can only be done with css.
If not, what might work on ssr Blazor? (I tried doing delay + cancellationToken but it doesn’t work well)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="multiselect">
<input placeholder="search..." type="search"></input>
<select multiple>
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
</select>
</div>
<script>
window.onload = function () {
hide();
multisel.addEventListener("focus", focusin, true);
multisel.addEventListener("blur", fucusout, true);
// multisel.addEventListener("focusin", focusin);
// multisel.addEventListener("focusout", fucusout);
}
function focusin(event) {
show();
}
function fucusout(event) {
hide();
}
function hide() {
let el = document.querySelector('select');
el.style.display = 'none';
}
function show() {
let el = document.querySelector('select');
el.style.display = 'block';
}
</script>
<style>
body {
font-size: 20px !important;
}
.multiselect {
width: 400px;
}
select {
width: 100%;
font-size: 20px;
}
input {
width: 100%;
font-size: 20px;
}
</style>
</body>
</html>