After CR

Author: OstafinL

src/bundle/Resources/public/js/scripts/core/multilevel.popup.menu.js

@@ -137,6 +137,14 @@
                 },
                 false,
             );
+            branchElement.addEventListener(
+                'ibexa-multilevel-popup-menu:close-branch',
+                () => {
+                    this.hoveredBranches.delete(branchElement);
+                    this.updateBranchAndParentBranchesOpenState(branchElement);
+                },
+                false,
+            );
 
             processBranchAfter(branchElement);
             branchItems.forEach((itemElement) => processBranchItemAfter(itemElement));
@@ -394,14 +402,14 @@
                 return;
             }
 
-            const branchsSearchInput = doc.querySelectorAll('.ibexa-multilevel-popup-menu__search-input');
+            const branchesSearchInput = doc.querySelectorAll('.ibexa-multilevel-popup-menu__search-input');
 
-            branchsSearchInput.forEach((searchInput) => {
+            branchesSearchInput.forEach((searchInput) => {
                 if (searchInput.value !== '') {
                     const searchInputBranch = searchInput.closest('.ibexa-multilevel-popup-menu__branch');
 
                     searchInput.value = '';
-                    searchInputBranch.dispatchEvent(new Event('mouseleave'));
+                    searchInputBranch.dispatchEvent(new CustomEvent('ibexa-multilevel-popup-menu:close-branch'));
                     searchInput.dispatchEvent(new Event('input'));
                 }
             });
@@ -416,9 +424,9 @@
             const phraseLowerCase = searchInput.value.toLowerCase();
 
             branchItems.forEach((item) => {
-                const { label } = item.dataset;
-                const labelLowerCase = label.toLowerCase();
-                const hideItem = !labelLowerCase.includes(phraseLowerCase);
+                const { searchLabel } = item.dataset;
+                const searchLabelLowerCase = searchLabel.toLowerCase();
+                const hideItem = !searchLabelLowerCase.includes(phraseLowerCase);
 
                 item.classList.toggle('ibexa-popup-menu__item--hidden', hideItem);
             });

src/bundle/Resources/public/js/scripts/embedded.item.actions.js

@@ -2,7 +2,7 @@
     const MIN_ITEMS_NUMBER_TO_SHOW_SEARCH = 10;
     const MENU_PROPS = {
         placement: 'bottom-start',
-        fallbackPlacements: ['bottom-start', 'top-end', 'top-start'],
+        fallbackPlacements: ['top-end', 'top-start'],
     };
     const token = document.querySelector('meta[name="CSRF-Token"]').content;
     const siteaccess = document.querySelector('meta[name="SiteAccess"]').content;
@@ -201,14 +201,12 @@
         }
     };
     const getMenuData = ({ container, event }) => {
-        const { contentId, locationId, productCode, languageCodes } = container ? container.dataset : event.detail;
+        const { contentId, locationId, productCode, languageCodes = [] } = container ? container.dataset : event.detail;
         const parsedLanguageCodes = typeof languageCodes === 'string' ? JSON.parse(languageCodes) : languageCodes;
-        const languages = parsedLanguageCodes
-            ? parsedLanguageCodes.map((languageCode) => ({
-                  languageCode,
-                  name: adminUiLanguages[languageCode].name,
-              }))
-            : [];
+        const languages = parsedLanguageCodes.map((languageCode) => ({
+            languageCode,
+            name: adminUiLanguages[languageCode].name,
+        }));
 
         return {
             contentId: parseInt(contentId, 10),

src/bundle/Resources/translations/ibexa_multilevel.en.xliff

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" xmlns:jms="urn:jms:translation" version="1.2">
+  <file source-language="en" target-language="en" datatype="plaintext" original="not.available">
+    <header>
+      <tool tool-id="JMSTranslationBundle" tool-name="JMSTranslationBundle" tool-version="1.1.0-DEV"/>
+      <note>The source node in most cases contains the sample message as written by the developer. If it looks like a dot-delimitted string such as "form.label.firstname", then the developer has not provided a default message.</note>
+    </header>
+    <body>
+      <trans-unit id="2b096dbbbcadb6a316903dce656706b528229e21" resname="search.placeholder">
+        <source>Search...</source>
+        <target state="new">Search...</target>
+        <note>key: search.placeholder</note>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>

src/bundle/Resources/views/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig

@@ -8,13 +8,13 @@
 }) -%}
 
 {%- block branch -%}
-    {% trans_default_domain 'ibexa_dropdown' %}
+    {% trans_default_domain 'ibexa_multilevel' %}
 
     <div {{ html.attributes(branch_attr, is_template) }}>
         <div class="ibexa-multilevel-popup-menu__search {{ not hasSearch|default(false) ? 'ibexa-multilevel-popup-menu__search--hidden' }}">
             <input
                 type="text"
-                placeholder="{{ 'dropdown.search'|trans|desc('Search...') }}"
+                placeholder="{{ 'search.placeholder'|trans|desc('Search...') }}"
                 class="ibexa-input ibexa-input--small ibexa-input--text form-control ibexa-multilevel-popup-menu__search-input" 
             />
         </div>

src/bundle/Resources/views/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_item.html.twig

@@ -6,7 +6,7 @@
     class: ('ibexa-popup-menu__item ibexa-multilevel-popup-menu__item '
         ~ (branch|default(null) ? 'ibexa-popup-menu__item--has-subitems ')
         ~ item_attr.class|default(''))|trim,
-    'data-label': label,
+    'data-search-label': label,
 }) -%}
 
 {%- set action_attr = action_attr|default({})|merge({