@finsweet/webflow-apps-utils 1.0.55 → 1.0.56
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -103,7 +103,6 @@
|
|
|
103
103
|
event.preventDefault();
|
|
104
104
|
event.stopPropagation();
|
|
105
105
|
closeDropdown();
|
|
106
|
-
// Remove focus to prevent focus ring after closing
|
|
107
106
|
if (document.activeElement instanceof HTMLElement) {
|
|
108
107
|
document.activeElement.blur();
|
|
109
108
|
}
|
|
@@ -387,35 +386,40 @@
|
|
|
387
386
|
const showDropdown = () => {
|
|
388
387
|
if (disabled) return;
|
|
389
388
|
|
|
389
|
+
// Show the dropdown FIRST so elements are focusable before calling focus()
|
|
390
390
|
tooltip.setAttribute('aria-hidden', 'false');
|
|
391
|
+
tooltip.style.display = 'flex';
|
|
392
|
+
isOpen = true;
|
|
393
|
+
isFocused = true;
|
|
391
394
|
update();
|
|
392
395
|
|
|
393
396
|
const selectedItemButton = tooltip.querySelector(
|
|
394
397
|
`.dropdown-item[aria-selected="true"]`
|
|
395
398
|
) as HTMLElement;
|
|
396
399
|
const firstItemButton = tooltip.querySelector('.dropdown-item') as HTMLElement;
|
|
397
|
-
const itemToFocus = selectedItemButton || firstItemButton;
|
|
398
400
|
|
|
399
401
|
const searchInput = tooltip?.querySelector<HTMLInputElement>('input[type="text"]');
|
|
400
|
-
if (
|
|
402
|
+
if (selectedItemButton) {
|
|
403
|
+
selectedItemButton.focus();
|
|
404
|
+
if (lastHoveredItem) {
|
|
405
|
+
lastHoveredItem.classList.remove('hover-state');
|
|
406
|
+
lastHoveredItem.setAttribute('tabindex', '-1');
|
|
407
|
+
}
|
|
408
|
+
lastHoveredItem = selectedItemButton;
|
|
409
|
+
lastHoveredItem.classList.add('hover-state');
|
|
410
|
+
lastHoveredItem.setAttribute('tabindex', '0');
|
|
411
|
+
} else if (searchInput && enableSearch) {
|
|
401
412
|
searchInput.focus();
|
|
402
|
-
} else {
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
lastHoveredItem.classList.remove('hover-state');
|
|
408
|
-
lastHoveredItem.setAttribute('tabindex', '-1');
|
|
409
|
-
}
|
|
410
|
-
lastHoveredItem = itemToFocus;
|
|
411
|
-
lastHoveredItem.classList.add('hover-state');
|
|
412
|
-
lastHoveredItem.setAttribute('tabindex', '0');
|
|
413
|
+
} else if (firstItemButton) {
|
|
414
|
+
firstItemButton.focus();
|
|
415
|
+
if (lastHoveredItem) {
|
|
416
|
+
lastHoveredItem.classList.remove('hover-state');
|
|
417
|
+
lastHoveredItem.setAttribute('tabindex', '-1');
|
|
413
418
|
}
|
|
419
|
+
lastHoveredItem = firstItemButton;
|
|
420
|
+
lastHoveredItem.classList.add('hover-state');
|
|
421
|
+
lastHoveredItem.setAttribute('tabindex', '0');
|
|
414
422
|
}
|
|
415
|
-
|
|
416
|
-
tooltip.style.display = 'flex';
|
|
417
|
-
isOpen = true;
|
|
418
|
-
isFocused = true;
|
|
419
423
|
};
|
|
420
424
|
|
|
421
425
|
const options: EventOption[] = [['click', showDropdown]].filter(Boolean) as EventOption[];
|
|
@@ -575,6 +579,9 @@
|
|
|
575
579
|
onkeydown={(e) => {
|
|
576
580
|
e.stopPropagation();
|
|
577
581
|
e.preventDefault();
|
|
582
|
+
if (e.key === 'Escape' && closeOnEscape) {
|
|
583
|
+
closeDropdown();
|
|
584
|
+
}
|
|
578
585
|
}}
|
|
579
586
|
onmouseenter={handleMouseEnter}
|
|
580
587
|
aria-hidden={!isOpen}
|