vsx: fix search input behavior

The commit fixes the search input behavior which would always move the
cursor to the end of the input when inputting characters, even those in
between.

The issue was the mismatch of react controlled and uncontrolled input,
which would mean keeping a state about the cursor during updates.

Signed-off-by: vince-fugnitto <vincent.fugnitto@ericsson.com>

packages/vsx-registry/src/browser/vsx-extensions-search-bar.tsx

@@ -29,15 +29,15 @@ export class VSXExtensionsSearchBar extends ReactWidget {
     protected init(): void {
         this.id = 'vsx-extensions-search-bar';
         this.addClass('theia-vsx-extensions-search-bar');
-        this.model.onDidChangeQuery(() => this.update());
+        this.model.onDidChangeQuery(() => this.updateSearchTerm(this.model.query));
     }
 
     protected input: HTMLInputElement | undefined;
 
     protected render(): React.ReactNode {
         return <input type='text'
             ref={input => this.input = input || undefined}
-            value={this.model.query}
+            defaultValue={this.model.query}
             className='theia-input'
             placeholder='Search Extensions in Open VSX Registry'
             onChange={this.updateQuery}>
@@ -46,6 +46,12 @@ export class VSXExtensionsSearchBar extends ReactWidget {
 
     protected updateQuery = (e: React.ChangeEvent<HTMLInputElement>) => this.model.query = e.target.value;
 
+    protected updateSearchTerm(term: string): void {
+        if (this.input) {
+            this.input.value = term;
+        }
+    }
+
     protected onActivateRequest(msg: Message): void {
         super.onActivateRequest(msg);
         if (this.input) {