From 34ffc0065ac17244109f7e6da0758cc85ec70bec Mon Sep 17 00:00:00 2001 From: Penar Musaraj Date: Fri, 21 Apr 2023 14:30:47 -0400 Subject: [PATCH] FIX: Better detect text selection in search input (#21202) Followup to 17ba00c3950eb0a78dd510f3618f8e7be2d448fc. Fix for https://meta.discourse.org/t/-/261917 This fixes a usability issue where the user couldn't switch to the user menu when the search menu was visible and the text in the input was selected. Explanation: The `click` event is triggered both when clicking and when selecting some text and clicking. This means that when selecting text in the search input, at the end of the selection event, a click event was triggered. And if that click event happened to be outside of the search menu, then the menu would be dismissed. Previously, we fixed this by checked if a current text selection was present. But that results in a small side-effect of not switching to other menus. This PR switches to setting a flag during `mouseDown` and then using that flag when evaluating whether to trigger clickOutside or not. --- .../javascripts/discourse/app/widgets/search-menu.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/discourse/app/widgets/search-menu.js b/app/assets/javascripts/discourse/app/widgets/search-menu.js index 00f98ada54a..cf222e76506 100644 --- a/app/assets/javascripts/discourse/app/widgets/search-menu.js +++ b/app/assets/javascripts/discourse/app/widgets/search-menu.js @@ -348,10 +348,17 @@ export default createWidget("search-menu", { }); }, + mouseDown(e) { + if (e.target === document.querySelector("input#search-term")) { + this.state.inputSelectionEvent = true; + } + }, + clickOutside() { - if (this.key === "search-menu" && !window.getSelection().toString()) { + if (this.key === "search-menu" && !this.state.inputSelectionEvent) { this.sendWidgetAction("toggleSearchMenu"); } + this.state.inputSelectionEvent = false; }, clearTopicContext() {