From 1a15395d46fbf575e725ca2e5ff4543d1b513ead Mon Sep 17 00:00:00 2001
From: Taewoo Kim <taewoo.kim@grafana.com>
Date: Mon, 8 May 2023 16:25:38 -0400
Subject: [PATCH] fix e2e selector: change autoSizeInput to Input

---
 .../grafana-e2e-selectors/src/selectors/pages.ts    |  2 +-
 .../datasources/components/EditDataSourceTitle.tsx  | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/grafana-e2e-selectors/src/selectors/pages.ts b/packages/grafana-e2e-selectors/src/selectors/pages.ts
index 52b76aad6c7..d6326eb1efc 100644
--- a/packages/grafana-e2e-selectors/src/selectors/pages.ts
+++ b/packages/grafana-e2e-selectors/src/selectors/pages.ts
@@ -17,7 +17,7 @@ export const Pages = {
     url: '/',
   },
   DataSource: {
-    name: 'Data source settings page name input field',
+    name: 'data-testid Data source settings page name input field',
     nameEditIcon: 'data-testid Data source settings page name edit icon button',
     delete: 'Data source settings page Delete button',
     readOnly: 'Data source settings page read only message',
diff --git a/public/app/features/datasources/components/EditDataSourceTitle.tsx b/public/app/features/datasources/components/EditDataSourceTitle.tsx
index 640bf0a85f6..365f418b7cd 100644
--- a/public/app/features/datasources/components/EditDataSourceTitle.tsx
+++ b/public/app/features/datasources/components/EditDataSourceTitle.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 
 import { DataSourceSettings, GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { IconButton, AutoSizeInput, useStyles2 } from '@grafana/ui';
+import { IconButton, useStyles2, Input } from '@grafana/ui';
 
 interface Props {
   dataSource: DataSourceSettings;
@@ -60,18 +60,17 @@ export function EditDataSourceTitle({ dataSource, title, readOnly, onUpdate }: P
         </div>
       ) : (
         <div className={styles.datasourceNameInput}>
-          <AutoSizeInput
+          <Input
             id="edit-data-source-name"
             type="text"
-            defaultValue={name}
+            value={name}
             placeholder="Name"
-            onCommitChange={(evt: React.FormEvent<HTMLInputElement>) => handleNameChange(evt.currentTarget.value)}
-            minWidth={40}
-            maxWidth={80}
+            onChange={(evt: React.FormEvent<HTMLInputElement>) => setName(evt.currentTarget.value)}
+            onBlur={(evt: React.FormEvent<HTMLInputElement>) => handleNameChange(evt.currentTarget.value)}
             required
             data-testid={selectors.pages.DataSource.name}
             autoFocus={isNameEditable}
-          ></AutoSizeInput>
+          ></Input>
         </div>
       )}
     </div>