From 2c50c67d079bf956e6711f39e6b906a47c84ef8f Mon Sep 17 00:00:00 2001 From: aryanshridhar Date: Tue, 30 Mar 2021 22:54:52 +0530 Subject: [PATCH] dropdown_list_widget: Properly bind focus event to input field. Previously, the focus event was triggering on a hidden dropdown input field, which caused it to not gain focus when clicked on dropdown button. This is so because focus events cannot be triggered to hidden elements or elements that aren't visible in DOM. Added a fix by explicilty triggering the focus event to dropdown input field only if the input field is visible in the DOM. --- static/js/dropdown_list_widget.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/static/js/dropdown_list_widget.js b/static/js/dropdown_list_widget.js index d191e55aa1..0c124f7faa 100644 --- a/static/js/dropdown_list_widget.js +++ b/static/js/dropdown_list_widget.js @@ -119,7 +119,13 @@ export const DropdownListWidget = function ({ // On opening a Bootstrap Dropdown, the parent element receives focus. // Here, we want our search input to have focus instead. e.preventDefault(); - search_input.trigger("focus"); + // This function gets called twice when focusing the + // dropdown, and only in the second call is the input + // field visible in the DOM; so the following visibility + // check ensures we wait for the second call to focus. + if (dropdown_list_body.is(":visible")) { + search_input.trigger("focus"); + } }); search_input.on("keydown", (e) => {