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' ]);