Close the userbar when clicking its toggle. Fix #9342 (#9808)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

Fixes https://github.com/wagtail/wagtail/issues/9342

CHANGELOG.txt

@@ -50,6 +50,7 @@ Changelog
  * Fix: Ensure that short content pages (such as editing snippets) do not show an inconsistent background (Sage Abdullah)
  * Fix: Fix horizontal positioning of rich text inline toolbar (Thibaud Colas)
  * Fix: Ensure that `DecimalBlock` correctly handles `None`, when `required=False`, values (Natarajan Balaji)
+ * Fix: Close the userbar when clicking its toggle (Albina Starykova)
  * Docs: Add custom permissions section to permissions documentation page (Dan Hayden)
  * Docs: Add documentation for how to get started with contributing translations for the Wagtail admin (Ogunbanjo Oluwadamilare)
  * Docs: Officially recommend `fnm` over `nvm` in development documentation (LB (Ben) Johnston)
@@ -101,6 +102,7 @@ Changelog
  * Fix: Support text resizing in workflow steps cards (Ivy Jeptoo)
  * Fix: Use the correct padding for autocomplete block picker (Umar Farouk Yunusa)
  * Fix: Fix horizontal positioning of rich text inline toolbar (Thibaud Colas)
+ * Fix: Close the userbar when clicking its toggle (Albina Starykova)
 
 
 4.1.1 (11.11.2022)

client/src/entrypoints/admin/userbar.js

@@ -201,7 +201,7 @@ document.addEventListener('DOMContentLoaded', () => {
     if (
       event.relatedTarget == null ||
       (event.relatedTarget &&
-        event.relatedTarget.closest('.wagtail-userbar-items'))
+        event.relatedTarget.closest('.wagtail-userbar-nav'))
     ) {
       return;
     }

docs/releases/4.1.2.md

@@ -21,3 +21,4 @@ depth: 1
  * Support text resizing in workflow steps cards (Ivy Jeptoo)
  * Use the correct padding for autocomplete block picker (Umar Farouk Yunusa)
  * Fix horizontal positioning of rich text inline toolbar (Thibaud Colas)
+ * Close the userbar when clicking its toggle (Albina Starykova)

docs/releases/4.2.md

@@ -69,6 +69,7 @@ This feature was developed by Sage Abdullah.
  * Ensure that short content pages (such as editing snippets) do not show an inconsistent background (Sage Abdullah)
  * Fix horizontal positioning of rich text inline toolbar (Thibaud Colas)
  * Ensure that `DecimalBlock` correctly handles `None`, when `required=False`, values (Natarajan Balaji)
+ * Close the userbar when clicking its toggle (Albina Starykova)
 
 ### Documentation