User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
As the title of the question, when implementing the drop-down menu or custom select control, should the underlying content rendered on page be disabled or made inaccessible as long as drop-down is open?
Further, should the focus be trapped till the menu is closed?
Yes. Select controls and drop-down menus are a form of modal interface and should block interaction with the underlying content.
This is often experienced as dismissing the menu or UI element by clicking outside of it when you don't want to make a choice. The underlying stuff that you click on doesn't respond to that click, it only dismisses the open menu interface.
When using a select or drop-down menu, regardless of how it is built (browser standard, or custom JS), the user enters a new mode of input: they are interacting with the menu rather than any content under/below it. These controls usually trap keyboard events and focus as well, to facilitate making a selection for users who may not be using a mouse or are faster using the keyboard.
Even though select controls were traditionally controlled by the operating system, JS implementations should replicate this modal behavior in order to match user expectations and prevent accidental activation of any buttons or links on the page when a user only intends to make something go away.
Using the Esc key also commonly dismisses these controls if they are open.
