fix: use onChange instead of onInputChange to make autocomplete actually work

Signed-off-by: Benjamin Janssens <benji.janssens@gmail.com>

plugins/scaffolder/src/components/fields/RepoUrlPicker/BitbucketRepoPicker.test.tsx

@@ -23,6 +23,7 @@ import {
   ScaffolderApi,
   scaffolderApiRef,
 } from '@backstage/plugin-scaffolder-react';
+import { act } from 'react-dom/test-utils';
 
 describe('BitbucketRepoPicker', () => {
   const scaffolderApiMock: Partial<ScaffolderApi> = {
@@ -100,7 +101,9 @@ describe('BitbucketRepoPicker', () => {
 
       const workspaceInput = getAllByRole('textbox')[0];
 
+      act(() => workspaceInput.focus());
       fireEvent.change(workspaceInput, { target: { value: 'test-workspace' } });
+      act(() => workspaceInput.blur());
 
       expect(onChange).toHaveBeenCalledWith({ workspace: 'test-workspace' });
     });
@@ -121,7 +124,9 @@ describe('BitbucketRepoPicker', () => {
 
       const projectInput = getAllByRole('textbox')[1];
 
+      act(() => projectInput.focus());
       fireEvent.change(projectInput, { target: { value: 'test-project' } });
+      act(() => projectInput.blur());
 
       expect(onChange).toHaveBeenCalledWith({ project: 'test-project' });
     });

plugins/scaffolder/src/components/fields/RepoUrlPicker/BitbucketRepoPicker.tsx

@@ -163,8 +163,8 @@ export const BitbucketRepoPicker = (props: {
           ) : (
             <Autocomplete
               value={workspace}
-              onInputChange={(_, newValue) => {
-                onChange({ workspace: String(newValue) });
+              onChange={(_, newValue) => {
+                onChange({ workspace: newValue || '' });
               }}
               options={availableWorkspaces}
               renderInput={params => (
@@ -198,8 +198,8 @@ export const BitbucketRepoPicker = (props: {
         ) : (
           <Autocomplete
             value={project}
-            onInputChange={(_, newValue) => {
-              onChange({ project: String(newValue) });
+            onChange={(_, newValue) => {
+              onChange({ project: newValue || '' });
             }}
             options={availableProjects}
             renderInput={params => (

plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerRepoName.test.tsx

@@ -17,6 +17,7 @@ import React from 'react';
 import { RepoUrlPickerRepoName } from './RepoUrlPickerRepoName';
 import { render, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { act } from 'react-dom/test-utils';
 
 describe('RepoUrlPickerRepoName', () => {
   it('should call onChange with the first allowed repo if there is none set already', async () => {
@@ -70,7 +71,9 @@ describe('RepoUrlPickerRepoName', () => {
 
     expect(textArea).toBeVisible();
 
+    act(() => textArea.focus());
     fireEvent.change(textArea, { target: { value: 'foo' } });
+    act(() => textArea.blur());
 
     expect(onChange).toHaveBeenCalledWith('foo');
   });

plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerRepoName.tsx

@@ -64,14 +64,15 @@ export const RepoUrlPickerRepoName = (props: {
         ) : (
           <Autocomplete
             value={repoName}
-            onInputChange={(_, newValue) => {
-              onChange(String(newValue));
+            onChange={(_, newValue) => {
+              onChange(newValue || '');
             }}
             options={availableRepos || []}
             renderInput={params => (
               <TextField {...params} label="Repository" required />
             )}
             freeSolo
+            autoSelect
           />
         )}
         <FormHelperText>The name of the repository</FormHelperText>