When creating a dropdown using ul and li tags, I am faced with the dilemma of determining the ideal time to hide the dropdown menu.
The dropdown menu is designed to display values based on user input as they type, updating dynamically. Initially, I had set the menu to hide on the input box's onBlur event. This allowed me to view the dropdown menu when clicking on an item, triggering the blur event to hide the menu and fill the value into the input box using JavaScript code. However, encountering issues with longer menus that include a scrollbar, clicking on the scrollbar triggers the blur event as well. I attempted to implement checks to focus on the scroll bar; however, this proved unsuccessful as the DOM body becomes the focused element when clicking on the scroll bar. Any suggestions or thoughts on how to resolve this issue would be greatly appreciated. Thank you.