refactor(core/button): imporved autofocus handling

siemens · Dec 2, 2024 · fb06cd9 · fb06cd9
1 parent af8571b
commit fb06cd9
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 65 deletions.
diff --git a/packages/angular-test-app/src/preview-examples/modal-by-instance-content.ts b/packages/angular-test-app/src/preview-examples/modal-by-instance-content.ts
@@ -25,7 +25,11 @@ import { IxActiveModal } from '@siemens/ix-angular';
       >
         Cancel
       </ix-button>
-      <ix-button class="close-modal" (click)="activeModal.close('okay')">
+      <ix-button
+        autofocus
+        class="close-modal"
+        (click)="activeModal.close('okay')"
+      >
         OK
       </ix-button>
     </ix-modal-footer>

diff --git a/packages/angular-test-app/src/preview-examples/modal-by-instance.ts b/packages/angular-test-app/src/preview-examples/modal-by-instance.ts
@@ -22,6 +22,7 @@ export default class ModalByInstance {
     await this.modalService.open({
       content: ModalByInstanceExample,
       data: 'Some data',
+      autofocus: true,
     });
   }
 }
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -206,14 +206,14 @@ export declare interface IxBreadcrumbItem extends Components.IxBreadcrumbItem {}
 
 
 @ProxyCmp({
-  inputs: ['autofocused', 'disabled', 'ghost', 'icon', 'loading', 'outline', 'type', 'variant']
+  inputs: ['disabled', 'ghost', 'icon', 'loading', 'outline', 'type', 'variant']
 })
 @Component({
   selector: 'ix-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['autofocused', 'disabled', 'ghost', 'icon', 'loading', 'outline', 'type', 'variant'],
+  inputs: ['disabled', 'ghost', 'icon', 'loading', 'outline', 'type', 'variant'],
 })
 export class IxButton {
   protected el: HTMLElement;

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -1340,28 +1340,6 @@
         ]
       },
       "props": [
-        {
-          "name": "autofocused",
-          "type": "boolean",
-          "complexType": {
-            "original": "boolean",
-            "resolved": "boolean",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "autofocused",
-          "reflectToAttr": false,
-          "docs": "Autofocus the button",
-          "docsTags": [],
-          "default": "false",
-          "values": [
-            {
-              "type": "boolean"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
         {
           "name": "disabled",
           "type": "boolean",

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -267,10 +267,6 @@ export namespace Components {
     }
     interface IxButton {
         "alignment": 'center' | 'start';
-        /**
-          * Autofocus the button
-         */
-        "autofocused": boolean;
         /**
           * Disable the button
          */
@@ -293,7 +289,6 @@ export namespace Components {
           * Outline button
          */
         "outline": boolean;
-        "setFocus": (delay?: number) => Promise<void>;
         /**
           * Type of the button
          */
@@ -5283,10 +5278,6 @@ declare namespace LocalJSX {
     }
     interface IxButton {
         "alignment"?: 'center' | 'start';
-        /**
-          * Autofocus the button
-         */
-        "autofocused"?: boolean;
         /**
           * Disable the button
          */

diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx
@@ -7,15 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {
-  Component,
-  Element,
-  h,
-  Host,
-  Listen,
-  Method,
-  Prop,
-} from '@stencil/core';
+import { Component, Element, h, Host, Listen, Prop } from '@stencil/core';
 import { BaseButton, BaseButtonProps } from './base-button';
 
 export type ButtonVariant = 'danger' | 'primary' | 'secondary';
@@ -64,11 +56,6 @@ export class Button {
    */
   @Prop() icon?: string;
 
-  /**
-   * Autofocus the button
-   */
-  @Prop() autofocused = false;
-
   /** @internal */
   @Prop() alignment: 'center' | 'start' = 'center';
 
@@ -113,12 +100,8 @@ export class Button {
     }
   }
 
-  /** @internal */
-  @Method()
-  async setFocus(delay = 0) {
-    setTimeout(() => {
-      this.hostElement.shadowRoot!.querySelector('button')?.focus();
-    }, delay);
+  setFocus() {
+    this.hostElement.shadowRoot!.querySelector('button')?.focus();
   }
 
   render() {
@@ -136,14 +119,17 @@ export class Button {
       onClick: () => this.dispatchFormEvents(),
       type: this.type,
       alignment: this.alignment,
-      autofocus: this.autofocused,
+      autofocus: this.hostElement.autofocus,
+      tabIndex: this.hostElement.tabIndex,
     };
 
     return (
       <Host
+        tabindex={this.disabled ? -1 : 0}
         class={{
           disabled: this.disabled || this.loading,
         }}
+        onFocus={() => this.setFocus()}
       >
         <BaseButton {...baseButtonProps}>
           <slot></slot>

diff --git a/packages/core/src/components/modal/test/modal.ct.ts b/packages/core/src/components/modal/test/modal.ct.ts
@@ -172,12 +172,11 @@ test('button receives focus on load', async ({ mount, page }) => {
     elm.innerHTML = `
       <ix-modal-header>Title</ix-modal-header>
       <ix-modal-footer>
-        <ix-button autofocused>OK</ix-button>
+        <ix-button autofocus>OK</ix-button>
       </ix-modal-footer>
     `;
     window.showModal({
       content: elm,
-      autofocus: true,
     });
     const okButton = elm.querySelector('ix-button');
     okButton?.addEventListener('click', () => {

diff --git a/packages/core/src/components/utils/modal/modal.ts b/packages/core/src/components/utils/modal/modal.ts
@@ -115,11 +115,12 @@ export async function showModal<T>(
     }
   );
 
-  if (config.autofocus) {
-    const autofocusElement = dialogRef.querySelector('ix-button[autofocused]');
-    if (autofocusElement) {
-      (autofocusElement as HTMLIxButtonElement).setFocus(150);
-    }
+  const autofocusElement = dialogRef.querySelector('ix-button[autofocus]');
+
+  if (autofocusElement) {
+    requestAnimationFrame(() =>
+      (autofocusElement as HTMLIxButtonElement).focus()
+    );
   }
 
   return {

diff --git a/packages/storybook-docs/src/stories/modal.stories.ts b/packages/storybook-docs/src/stories/modal.stories.ts
@@ -71,7 +71,7 @@ export const ShowFunction: Story = {
           <ix-modal-content>Content</ix-modal-content>
           <ix-modal-footer>
             <ix-button outline>Close</ix-button>
-            <ix-button autofocused>Okay</ix-button>
+            <ix-button autofocus>Okay</ix-button>
           </ix-modal-footer>
         `,
         mount
@@ -82,7 +82,7 @@ export const ShowFunction: Story = {
           p.onDismiss.once(() => refs.delete(ctx.id));
         });
         mount
-          .querySelector('ix-button[autofocused]')
+          .querySelector('ix-button[autofocus]')
           ?.addEventListener('click', () => dismissModal(mount));
         refs.set(ctx.id, mount);
       }

diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts
@@ -191,7 +191,6 @@ export const IxButton = /*@__PURE__*/ defineContainer<JSX.IxButton>('ix-button',
   'type',
   'loading',
   'icon',
-  'autofocused',
   'alignment',
   'iconSize'
 ]);