diff --git a/resources/js/wysiwyg/ui/framework/forms.ts b/resources/js/wysiwyg/ui/framework/forms.ts index b12d9f692..3d8c53d46 100644 --- a/resources/js/wysiwyg/ui/framework/forms.ts +++ b/resources/js/wysiwyg/ui/framework/forms.ts @@ -98,6 +98,13 @@ export class EditorForm extends EditorContainerUiElement { this.definition = definition; } + focusOnFirst() { + const focusable = this.getDOMElement().querySelector('input,select,textarea'); + if (focusable) { + (focusable as HTMLElement).focus(); + } + } + setValues(values: Record) { for (const name of Object.keys(values)) { const field = this.getFieldByName(name); diff --git a/resources/js/wysiwyg/ui/framework/modals.ts b/resources/js/wysiwyg/ui/framework/modals.ts index 4dbe9d962..3f5a5881f 100644 --- a/resources/js/wysiwyg/ui/framework/modals.ts +++ b/resources/js/wysiwyg/ui/framework/modals.ts @@ -14,6 +14,7 @@ export interface EditorFormModalDefinition extends EditorModalDefinition { export class EditorFormModal extends EditorContainerUiElement { protected definition: EditorFormModalDefinition; protected key: string; + protected originalFocus: Element|null = null; constructor(definition: EditorFormModalDefinition, key: string) { super([new EditorForm(definition.form)]); @@ -22,6 +23,7 @@ export class EditorFormModal extends EditorContainerUiElement { } show(defaultValues: Record) { + this.originalFocus = document.activeElement as Element; const dom = this.getDOMElement(); document.body.append(dom); @@ -31,11 +33,15 @@ export class EditorFormModal extends EditorContainerUiElement { form.setOnSuccessfulSubmit(this.hide.bind(this)); this.getContext().manager.setModalActive(this.key, this); + form.focusOnFirst(); } hide() { this.getContext().manager.setModalInactive(this.key); this.teardown(); + if (this.originalFocus instanceof HTMLElement && this.originalFocus.isConnected) { + this.originalFocus.focus(); + } } getForm(): EditorForm { @@ -69,6 +75,12 @@ export class EditorFormModal extends EditorContainerUiElement { } }); + wrapper.addEventListener('keydown', event => { + if (event.key === 'Escape') { + this.hide(); + } + }); + return wrapper; } } \ No newline at end of file