diff --git a/projects/common/element-components/text-area.component.ts b/projects/common/element-components/text-area.component.ts index a1e6387459edc69e9776add9d2f64529ead5c2d8..248af63e2018ba44c4ff0b83f8db2ea346b18a04 100644 --- a/projects/common/element-components/text-area.component.ts +++ b/projects/common/element-components/text-area.component.ts @@ -23,8 +23,8 @@ import { TextAreaElement } from '../models/text-area-element'; [style.min-width.%]="100" [style.line-height.%]="elementModel.lineHeight" [style.resize]="elementModel.resizeEnabled ? 'both' : 'none'" - (focus)="elementModel.inputAssistancePreset !== 'none' ? onFocus.emit(input) : null" - (blur)="elementModel.inputAssistancePreset !== 'none' ? onBlur.emit(input): null"> + (focus)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(input) : null" + (blur)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(null): null"> </textarea> <mat-error *ngIf="elementFormControl.errors"> {{elementFormControl.errors | errorTransform: elementModel}} @@ -33,7 +33,6 @@ import { TextAreaElement } from '../models/text-area-element'; ` }) export class TextAreaComponent extends FormElementComponent { - @Output() onFocus = new EventEmitter<HTMLElement>(); - @Output() onBlur = new EventEmitter<HTMLElement>(); + @Output() onFocusChanged = new EventEmitter<HTMLElement | null>(); elementModel!: TextAreaElement; } diff --git a/projects/common/element-components/text-field.component.ts b/projects/common/element-components/text-field.component.ts index ce0ac96c775a92e0b743aad70791d205edc1aa31..33948402b8a1692246676b24c2290888e4d9f482 100644 --- a/projects/common/element-components/text-field.component.ts +++ b/projects/common/element-components/text-field.component.ts @@ -23,8 +23,8 @@ import { TextFieldElement } from '../models/text-field-element'; [value]="elementModel.value" [pattern]="elementModel.pattern" [readonly]="elementModel.readOnly" - (focus)="onFocus.emit(input)" - (blur)="onBlur.emit(input)"> + (focus)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(input) : null" + (blur)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(null): null"> <button *ngIf="elementModel.clearable" matSuffix mat-icon-button aria-label="Clear" (click)="onClick($event)"> <mat-icon>close</mat-icon> @@ -49,8 +49,8 @@ import { TextFieldElement } from '../models/text-field-element'; [value]="elementModel.value" [readonly]="elementModel.readOnly" [pattern]="elementModel.pattern" - (focus)="onFocus.emit(input)" - (blur)="onBlur.emit(input)"> + (focus)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(input) : null" + (blur)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(null): null"> <button *ngIf="elementModel.clearable" matSuffix mat-icon-button aria-label="Clear" (click)="onClick($event)"> <mat-icon>close</mat-icon> @@ -65,8 +65,7 @@ import { TextFieldElement } from '../models/text-field-element'; ] }) export class TextFieldComponent extends FormElementComponent { - @Output() onFocus = new EventEmitter<HTMLElement>(); - @Output() onBlur = new EventEmitter<HTMLElement>(); + @Output() onFocusChanged = new EventEmitter<HTMLElement | null>(); elementModel!: TextFieldElement; onClick(event: MouseEvent) : void { diff --git a/projects/player/src/app/components/element-container/element-container.component.ts b/projects/player/src/app/components/element-container/element-container.component.ts index 19759eb43bd0b87876c6925352c38af140944d70..eee50b58c747f283590aa535bfa836b7bd11498a 100644 --- a/projects/player/src/app/components/element-container/element-container.component.ts +++ b/projects/player/src/app/components/element-container/element-container.component.ts @@ -195,23 +195,19 @@ export class ElementContainerComponent implements OnInit { } private subscribeForKeyboardEvents(elementComponent: any): void { - if (elementComponent.onFocus) { - elementComponent.onFocus + if (elementComponent.onFocusChanged) { + elementComponent.onFocusChanged .pipe(takeUntil(this.ngUnsubscribe)) - .subscribe((focussedInputControl: HTMLElement): void => { - const inputElement = this.elementModel.type === 'text-area' ? - focussedInputControl as HTMLTextAreaElement : - focussedInputControl as HTMLInputElement; - this.keyboardLayout = (this.elementModel as TextFieldElement).inputAssistancePreset; - this.isKeyboardOpen = this.keyboardService.openKeyboard(inputElement); - }); - } - - if (elementComponent.onBlur) { - elementComponent.onBlur - .pipe(takeUntil(this.ngUnsubscribe)) - .subscribe((): void => { - this.isKeyboardOpen = this.keyboardService.closeKeyboard(); + .subscribe((focussedInputControl: HTMLElement | null): void => { + if (focussedInputControl) { + const inputElement = this.elementModel.type === 'text-area' ? + focussedInputControl as HTMLTextAreaElement : + focussedInputControl as HTMLInputElement; + this.keyboardLayout = (this.elementModel as TextFieldElement).inputAssistancePreset; + this.isKeyboardOpen = this.keyboardService.openKeyboard(inputElement); + } else { + this.isKeyboardOpen = this.keyboardService.closeKeyboard(); + } }); } }