From 62a9dcf8df69aba686557de3a58a873a69c6bf5e Mon Sep 17 00:00:00 2001
From: Benjamin Janssens <benji.janssens@gmail.com>
Date: Thu, 13 Jun 2024 17:00:14 +0200
Subject: [PATCH] fix: use onChange instead of onInputChange to make
 autocomplete actually work

Signed-off-by: Benjamin Janssens <benji.janssens@gmail.com>
---
 .../fields/RepoUrlPicker/BitbucketRepoPicker.test.tsx     | 5 +++++
 .../fields/RepoUrlPicker/BitbucketRepoPicker.tsx          | 8 ++++----
 .../fields/RepoUrlPicker/RepoUrlPickerRepoName.test.tsx   | 3 +++
 .../fields/RepoUrlPicker/RepoUrlPickerRepoName.tsx        | 5 +++--
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/BitbucketRepoPicker.test.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/BitbucketRepoPicker.test.tsx
index 404fb6ddf6..10c049b3a0 100644
--- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/BitbucketRepoPicker.test.tsx
+++ b/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' });
     });
diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/BitbucketRepoPicker.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/BitbucketRepoPicker.tsx
index 995470fbcb..51bd1f5c67 100644
--- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/BitbucketRepoPicker.tsx
+++ b/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 => (
diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerRepoName.test.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerRepoName.test.tsx
index 8228f443df..efc3c94e71 100644
--- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerRepoName.test.tsx
+++ b/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');
   });
diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerRepoName.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerRepoName.tsx
index cd346cf8ed..01878cb619 100644
--- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPickerRepoName.tsx
+++ b/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>