diff --git a/angular/projects/catalyst/src/lib/directives/proxies.ts b/angular/projects/catalyst/src/lib/directives/proxies.ts
index 7a87710af..305cdebfc 100644
--- a/angular/projects/catalyst/src/lib/directives/proxies.ts
+++ b/angular/projects/catalyst/src/lib/directives/proxies.ts
@@ -526,7 +526,7 @@ export declare interface CatDatepickerInline extends Components.CatDatepickerInl
}
@ProxyCmp({
- inputs: ['arrowNavigation', 'noAutoClose', 'noResize', 'overflow', 'placement'],
+ inputs: ['arrowNavigation', 'noAutoClose', 'noInitialFocus', 'noResize', 'overflow', 'placement'],
methods: ['toggle', 'open', 'close']
})
@Component({
@@ -534,7 +534,7 @@ export declare interface CatDatepickerInline extends Components.CatDatepickerInl
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
- inputs: ['arrowNavigation', 'noAutoClose', 'noResize', 'overflow', 'placement']
+ inputs: ['arrowNavigation', 'noAutoClose', 'noInitialFocus', 'noResize', 'overflow', 'placement']
})
export class CatDropdown {
protected el: HTMLElement;
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index fd3205a12..db523819c 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -642,6 +642,10 @@ export namespace Components {
* Do not close the dropdown on outside clicks.
*/
"noAutoClose": boolean;
+ /**
+ * No element in dropdown will receive focus when dropdown is open. By default, the first element in tab order will receive a focus.
+ */
+ "noInitialFocus": boolean;
/**
* Do not change the size of the dropdown to ensure it isn’t too big to fit in the viewport (or more specifically, its clipping context).
*/
@@ -2756,6 +2760,10 @@ declare namespace LocalJSX {
* Do not close the dropdown on outside clicks.
*/
"noAutoClose"?: boolean;
+ /**
+ * No element in dropdown will receive focus when dropdown is open. By default, the first element in tab order will receive a focus.
+ */
+ "noInitialFocus"?: boolean;
/**
* Do not change the size of the dropdown to ensure it isn’t too big to fit in the viewport (or more specifically, its clipping context).
*/
diff --git a/core/src/components/cat-dropdown/cat-dropdown.tsx b/core/src/components/cat-dropdown/cat-dropdown.tsx
index 0431824dc..7e7d655b4 100644
--- a/core/src/components/cat-dropdown/cat-dropdown.tsx
+++ b/core/src/components/cat-dropdown/cat-dropdown.tsx
@@ -51,6 +51,12 @@ export class CatDropdown {
*/
@Prop() overflow = false;
+ /**
+ * No element in dropdown will receive focus when dropdown is open.
+ * By default, the first element in tab order will receive a focus.
+ */
+ @Prop() noInitialFocus = false;
+
/**
* Emitted when the dropdown is opened.
*/
@@ -99,6 +105,10 @@ export class CatDropdown {
*/
@Method()
async open(): Promise {
+ if (!this.trigger) {
+ this.initTrigger();
+ }
+
if (this.isOpen === null || this.isOpen) {
return; // busy or open
}
@@ -145,7 +155,8 @@ export class CatDropdown {
return true;
}
return event.key === 'Tab' && event.shiftKey;
- }
+ },
+ initialFocus: () => (this.noInitialFocus ? false : undefined)
});
this.trap.activate();
});
diff --git a/core/src/components/cat-dropdown/readme.md b/core/src/components/cat-dropdown/readme.md
index b9b9726d8..4f53d14c8 100644
--- a/core/src/components/cat-dropdown/readme.md
+++ b/core/src/components/cat-dropdown/readme.md
@@ -16,6 +16,7 @@ show additional content on demand.
| ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- |
| `arrowNavigation` | `arrow-navigation` | Do not navigate focus inside the dropdown via vertical arrow keys. | `"horizontal" \| "none" \| "vertical"` | `'vertical'` |
| `noAutoClose` | `no-auto-close` | Do not close the dropdown on outside clicks. | `boolean` | `false` |
+| `noInitialFocus` | `no-initial-focus` | No element in dropdown will receive focus when dropdown is open. By default, the first element in tab order will receive a focus. | `boolean` | `false` |
| `noResize` | `no-resize` | Do not change the size of the dropdown to ensure it isn’t too big to fit in the viewport (or more specifically, its clipping context). | `boolean` | `false` |
| `overflow` | `overflow` | Allow overflow when dropdown is open. | `boolean` | `false` |
| `placement` | `placement` | The placement of the dropdown. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom-start'` |
diff --git a/vue/src/components.ts b/vue/src/components.ts
index a69138456..3a8e545f8 100644
--- a/vue/src/components.ts
+++ b/vue/src/components.ts
@@ -193,6 +193,7 @@ export const CatDropdown = /*@__PURE__*/ defineContainer('cat-d
'arrowNavigation',
'noResize',
'overflow',
+ 'noInitialFocus',
'catOpen',
'catClose'
]);