feat(core): CatDropdown improvement (#499)

* feat(core): add property disableInitialFocus to CatDropdown, initTrigger if open method is called * feat(core): fix linter * feat(core): rename disableInitialFocus to noInitialFocus --------- Co-authored-by: anastasiia_glushkova <[email protected]>
haiilo · Apr 22, 2024 · ae27bcc · ae27bcc
1 parent 0b57dd3
commit ae27bcc
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 3 deletions.
diff --git a/angular/projects/catalyst/src/lib/directives/proxies.ts b/angular/projects/catalyst/src/lib/directives/proxies.ts
@@ -526,15 +526,15 @@ 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({
   selector: 'cat-dropdown',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // 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
@@ -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
@@ -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<void> {
+    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
@@ -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
@@ -193,6 +193,7 @@ export const CatDropdown = /*@__PURE__*/ defineContainer<JSX.CatDropdown>('cat-d
   'arrowNavigation',
   'noResize',
   'overflow',
+  'noInitialFocus',
   'catOpen',
   'catClose'
 ]);