@db-ux/ngx-core-components 3.1.15 → 3.1.17

package/fesm2022/db-ux-ngx-core-components.mjs

@@ -2983,39 +2983,53 @@ class DBCustomSelect {
                     if (isCheckbox) {
                         const listElement = activeElement?.closest("li");
                         if (event.key === "ArrowDown" || event.key === "ArrowRight") {
-                            if (listElement?.nextElementSibling) {
-                                listElement?.nextElementSibling
-                                    ?.querySelector("input")
-                                    ?.focus();
+                            // Find next element with input, skipping group titles
+                            let nextElement = listElement?.nextElementSibling;
+                            while (nextElement) {
+                                const nextInput = nextElement.querySelector("input");
+                                if (nextInput) {
+                                    nextInput.focus();
+                                    break;
+                                }
+                                nextElement = nextElement.nextElementSibling;
                             }
-                            else {
+                            if (!nextElement) {
                                 // We are on the last checkbox we move to the top checkbox
                                 this.handleFocusFirstDropdownCheckbox(activeElement);
                             }
                         }
                         else {
-                            if (listElement?.previousElementSibling) {
-                                listElement?.previousElementSibling
-                                    ?.querySelector("input")
-                                    ?.focus();
-                            }
-                            else if (this.detailsRef()?.nativeElement.querySelector(`input[type="checkbox"]`) !== activeElement) {
-                                // We are on the top list checkbox but there is a select all checkbox as well
-                                this.handleFocusFirstDropdownCheckbox(activeElement);
+                            // Find previous element with input, skipping group titles
+                            let prevElement = listElement?.previousElementSibling;
+                            while (prevElement) {
+                                const prevInput = prevElement.querySelector("input");
+                                if (prevInput) {
+                                    prevInput.focus();
+                                    break;
+                                }
+                                prevElement = prevElement.previousElementSibling;
                             }
-                            else {
-                                // We are on the top checkbox, we need to move to the search
-                                // or to the last checkbox
-                                const search = getSearchInput(this.detailsRef()?.nativeElement);
-                                if (search) {
-                                    delay(() => {
-                                        search.focus();
-                                    }, 100);
+                            if (!prevElement) {
+                                // Check if we have a "select all" checkbox (only relevant for multi-select)
+                                const selectAllCheckbox = this.detailsRef()?.nativeElement.querySelector(`input[type="checkbox"]`);
+                                if (selectAllCheckbox && selectAllCheckbox !== activeElement) {
+                                    // We are on the top list checkbox but there is a select all checkbox as well
+                                    this.handleFocusFirstDropdownCheckbox(activeElement);
                                 }
                                 else {
-                                    const checkboxList = Array.from(this.detailsRef()?.nativeElement?.querySelectorAll(`input[type="checkbox"],input[type="radio"]`));
-                                    if (checkboxList.length) {
-                                        checkboxList.at(-1)?.focus();
+                                    // We are on the top checkbox, we need to move to the search
+                                    // or to the last checkbox
+                                    const search = getSearchInput(this.detailsRef()?.nativeElement);
+                                    if (search) {
+                                        delay(() => {
+                                            search.focus();
+                                        }, 100);
+                                    }
+                                    else {
+                                        const checkboxList = Array.from(this.detailsRef()?.nativeElement?.querySelectorAll(`input[type="checkbox"],input[type="radio"]`));
+                                        if (checkboxList.length) {
+                                            checkboxList.at(-1)?.focus();
+                                        }
                                     }
                                 }
                             }