I am using tailwind css and jquery.
I have tried several things and I am not really getting it.
code below you will see I have place focusout on the outer div that contains the dropdown code. I put the focus on the searchbox when it is opened. It will open and focus on the search box is fine the dropdown stays open. But if I click on the person in the dropdown list, it is supposed to select and put a check box next to their name to indicate selected; however, the dropdown closes.
I mean I guess technically the <a tag got the focus but I thought it would consider that the parent <div tag still had focus since the <a tag is in the div tag. This does not happen with the search box, if I type in it, it is fine and I place the focus there. I am a little bit baffled.
<div id="select_users" style="">
<script type="text/javascript">
function fn_assigned_users() {
var element_id = 'assigned_users';
var link_id = element_id + "_item_link";
var open = false;
var selected = [];
var textField ='text';
var valueField = 'value';
var list = JSON.parse('[{"selected": false, "text": "Angela Law", "value": 1}]');
var button_elment = $(`#${element_id}_button`);
var dropdown_elment = $(`#${element_id}_dropdown`);
var selectedValues = $(`#${element_id}_selected`);
selectedValues.value = selected.join(",");
var searchElement = $(`#${element_id}_dropdown_search`);
dropdown_elment.focusout(function() {
open = false;
dropdown_elment.hide();
});
searchElement.on("keyup", function multi_dropdown_search_keyup(sender, arg){
for (let idx = 0; idx < list.length; idx++){
if (list[idx][textField].toLowerCase().includes(searchElement[0].value.toLowerCase()))
$(`#${link_id}_${idx}`).show();
else
$(`#${link_id}_${idx}`).hide();
}
});
button_elment.on("click", function multi_dropdown_button_click (sender, args){
open = !open;
if (open){
dropdown_elment.show();
searchElement.focus();
}
else
dropdown_elment.hide();
});
$(`[id^='${link_id}']`).each(
(idx, linkElm)=>{
$(linkElm).on('click', function multi_dropdown_link_click (sender, args){
let idx = $(linkElm).data('index');
list[idx].selected = !list[idx].selected;
itmElement = $(`#${element_id}_item_check_${idx}`);
if (list[idx].selected) {
itmElement.show();
selected.push(list[idx].value);
selectedValues.value = selected.join(",");
}
else {
itmElement.hide();
selected = selected.filter(f=> f != list[idx].value);
selectedValues.value = selected.join(",");
}
return false;
});
}
);
function clearSelection (){
for (itm in list){
itm.selected = false;
}
selected = [];
selectedValues = "";
$(`[id^='${link_id}']`).each((idx, linkElm)=>{
itmElement = $(`#${element_id}_item_check_${idx}`);
itmElement.hide();
});
}
return {
clear: clearSelection
}
}
$(function (){
assigned_users_instance = fn_assigned_users();
});
</script>
<div class="w-60">
<div class="relative mt-2">
<input id="assigned_users_selected" name="assigned_users" type="hidden">
<button type="button" id="assigned_users_button" name="assigned_users_button" class="relative w-full cursor-default rounded-md bg-white
py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300
focus:outline-none focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
<span class="flex items-center">
<span class="ml-1 block truncate"> Assign Users</span>
</span>
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 text-gray-500">
<svg class="w-2.5 h-2.5 ms-3" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</span>
</button>
<div style="display: none;" id="assigned_users_dropdown" name="assigned_users_dropdown" class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md
bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
<div class="p-3">
<input type="text" id="assigned_users_dropdown_search" name="assigned_users_dropdown_search" class="block w-full p-2 ps-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-600 dark:border-gray-500
rk:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search user">
</div>
<ul>
<li class="text-gray-900 relative cursor-default select-none py-2 pl-1 pr-9" id="listbox-option-0" role="option">
<a href="#" data-index="0" id="assigned_users_item_link_0" name="assigned_users_item_link_0">
<div class="flex items-center">
<span class="font-normal ml-3 block truncate">
Angela Law
</span>
</div>
<span style="display:none" id="assigned_users_item_check_0" name="assigned_users_item_check_0" class="text-indigo-600 absolute inset-y-0 right-0 flex items-center pr-4">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path>
</svg>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
I am trying to make this keep the dropdown down open as long as any typing and clicking in happening in the dropdown section. and when it clicks or types or tabs outside that area it closes automatically