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 = ({