diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.test.tsx
index 4fa73117a405..a37d89611187 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.test.tsx
@@ -110,4 +110,25 @@ describe('Test EntityDelete Modal Component', () => {
expect(await screen.findByText('label.soft-delete')).toBeInTheDocument();
});
+
+ it('should focus the input box on open', async () => {
+ // since the focus is set using setTimeout, we need to use fake timers
+ jest.useFakeTimers();
+ await act(async () => {
+ render(, {
+ wrapper: MemoryRouter,
+ });
+ });
+
+ await act(async () => {
+ jest.runAllTimers();
+ });
+
+ const inputBox = await screen.findByTestId('confirmation-text-input');
+
+ // Check if element is focused
+ expect(inputBox).toHaveFocus();
+
+ jest.useRealTimers();
+ });
});
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.tsx
index d4585f461a93..e96609410fa5 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.tsx
@@ -11,9 +11,15 @@
* limitations under the License.
*/
-import { Button, Input, Modal, Typography } from 'antd';
+import { Button, Input, InputRef, Modal, Typography } from 'antd';
import { t } from 'i18next';
-import React, { ChangeEvent, useEffect, useMemo, useState } from 'react';
+import React, {
+ ChangeEvent,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from 'react';
import { Trans } from 'react-i18next';
import { Transi18next } from '../../../utils/CommonUtils';
import { EntityDeleteModalProp } from './EntityDeleteModal.interface';
@@ -27,6 +33,7 @@ const EntityDeleteModal = ({
visible,
bodyText,
}: EntityDeleteModalProp) => {
+ const deleteTextInputRef = useRef(null);
const [name, setName] = useState('');
const [saving, setSaving] = useState(false);
@@ -45,6 +52,20 @@ const EntityDeleteModal = ({
// To remove the entered text in the modal input after modal closed
useEffect(() => {
setName('');
+
+ // Using this method to autoFocus Input element since directly calling focus() doesn't work
+ // for the inputs inside modal. Ref - https://github.com/ant-design/ant-design/issues/8668
+ let timeout: number;
+
+ if (visible) {
+ timeout = window.setTimeout(() => {
+ deleteTextInputRef.current?.focus();
+ }, 1);
+ }
+
+ return () => {
+ clearTimeout(timeout);
+ };
}, [visible]);
return (
@@ -112,11 +133,13 @@ const EntityDeleteModal = ({