feat(component-authoring): focus on component editing component when …

…rendered

Focus causes browser to scroll element into view if necessary.

src/assets/wise5/authoringTool/components/edit-component/edit-component.component.ts

@@ -14,7 +14,7 @@ import { components } from '../../../components/Components';
 @Component({
   selector: 'edit-component',
   standalone: true,
-  template: '<div #component></div>'
+  template: '<div #component tabindex="-1"></div>'
 })
 export class EditComponentComponent {
   @Input() componentContent: ComponentContent;
@@ -28,15 +28,17 @@ export class EditComponentComponent {
   ) {}
 
   ngAfterViewInit(): void {
+    const hostElement = this.componentElementRef.nativeElement;
     this.componentRef = createComponent(components[this.componentContent.type].authoring, {
-      hostElement: this.componentElementRef.nativeElement,
+      hostElement: hostElement,
       environmentInjector: this.injector
     });
     Object.assign(this.componentRef.instance, {
       componentContent: this.componentContent,
       nodeId: this.nodeId
     });
     this.applicationRef.attachView(this.componentRef.hostView);
+    setTimeout(() => hostElement.focus());
   }
 
   ngOnDestroy(): void {