FIX: Better detect text selection in search input (#21202)

Followup to 17ba00c395.
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.
This commit is contained in:
Penar Musaraj 2023-04-21 14:30:47 -04:00 committed by GitHub
parent 953ddbae79
commit 34ffc0065a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 1 deletions

View File

@ -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() {