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 index f97cfee5e3..541b20ac96 100644 --- 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 - + OK 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 index df07d66b25..0a5ac17db2 100644 --- 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 index f038afadef..ebf9c076bf 100644 --- 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: '', // 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 index 0225d8b950..dc886825fa 100644 --- 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 index c016e55871..d7d1d4d9e2 100644 --- 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; /** * 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 index db008b4ed0..fff355bd76 100644 --- 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 ( this.setFocus()} > diff --git a/packages/core/src/components/modal/test/modal.ct.ts b/packages/core/src/components/modal/test/modal.ct.ts index c14ae82745..8dfa83da9a 100644 --- 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 = ` Title - OK + OK `; 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 index e694aa5861..8434d38de3 100644 --- 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( } ); - 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 index 76e059c523..700aa7669f 100644 --- 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 = { Content Close - Okay + Okay `, 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 index 723aed72bf..3d14137075 100644 --- a/packages/vue/src/components.ts +++ b/packages/vue/src/components.ts @@ -191,7 +191,6 @@ export const IxButton = /*@__PURE__*/ defineContainer('ix-button', 'type', 'loading', 'icon', - 'autofocused', 'alignment', 'iconSize' ]);