template widget must handle focus (#146)

fixed #145

Signed-off-by: Jonas Helming <[email protected]>

Author: JonasHelming

templates/widget/widget.tsx

@@ -3,6 +3,7 @@ import { injectable, postConstruct, inject } from '@theia/core/shared/inversify'
 import { AlertMessage } from '@theia/core/lib/browser/widgets/alert-message';
 import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget';
 import { MessageService } from '@theia/core';
+import { Message } from '@theia/core/lib/browser';
 
 @injectable()
 export class <%= params.extensionPrefix %>Widget extends ReactWidget {
@@ -28,12 +29,20 @@ export class <%= params.extensionPrefix %>Widget extends ReactWidget {
         in order to display an info message to end users.`;
         return <div id='widget-container'>
             <AlertMessage type='INFO' header={header} />
-            <button className='theia-button secondary' title='Display Message' onClick={_a => this.displayMessage()}>Display Message</button>
+            <button id='displayMessageButton' className='theia-button secondary' title='Display Message' onClick={_a => this.displayMessage()}>Display Message</button>
         </div>
     }
 
     protected displayMessage(): void {
         this.messageService.info('Congratulations: <%= params.extensionPrefix %> Widget Successfully Created!');
     }
 
+    protected onActivateRequest(msg: Message): void {
+        super.onActivateRequest(msg);
+        const htmlElement = document.getElementById('displayMessageButton');
+        if (htmlElement) {
+            htmlElement.focus();
+        }
+    }
+
 }