diff --git a/superset-frontend/src/components/DeleteModal/DeleteModal.test.tsx b/superset-frontend/src/components/DeleteModal/DeleteModal.test.tsx
index 61c4a9a514..6cec92e2a8 100644
--- a/superset-frontend/src/components/DeleteModal/DeleteModal.test.tsx
+++ b/superset-frontend/src/components/DeleteModal/DeleteModal.test.tsx
@@ -44,13 +44,23 @@ test('Calling "onHide"', () => {
onHide: jest.fn(),
open: true,
};
- render();
+ const modal = ;
+ render(modal);
expect(props.onHide).toBeCalledTimes(0);
expect(props.onConfirm).toBeCalledTimes(0);
+
+ // type "del" in the input
+ userEvent.type(screen.getByTestId('delete-modal-input'), 'del');
+ expect(screen.getByTestId('delete-modal-input')).toHaveValue('del');
+
+ // close the modal
expect(screen.getByText('×')).toBeVisible();
userEvent.click(screen.getByText('×'));
expect(props.onHide).toBeCalledTimes(1);
expect(props.onConfirm).toBeCalledTimes(0);
+
+ // confirm input has been cleared
+ expect(screen.getByTestId('delete-modal-input')).toHaveValue('');
});
test('Calling "onConfirm" only after typing "delete" in the input', () => {
@@ -75,4 +85,7 @@ test('Calling "onConfirm" only after typing "delete" in the input', () => {
userEvent.type(screen.getByTestId('delete-modal-input'), 'delete');
userEvent.click(screen.getByText('delete'));
expect(props.onConfirm).toBeCalledTimes(1);
+
+ // confirm input has been cleared
+ expect(screen.getByTestId('delete-modal-input')).toHaveValue('');
});
diff --git a/superset-frontend/src/components/DeleteModal/index.tsx b/superset-frontend/src/components/DeleteModal/index.tsx
index 98639cddc0..f11390342e 100644
--- a/superset-frontend/src/components/DeleteModal/index.tsx
+++ b/superset-frontend/src/components/DeleteModal/index.tsx
@@ -52,12 +52,35 @@ export default function DeleteModal({
title,
}: DeleteModalProps) {
const [disableChange, setDisableChange] = useState(true);
+ const [confirmation, setConfirmation] = useState('');
+
+ const hide = () => {
+ setConfirmation('');
+ onHide();
+ };
+
+ const confirm = () => {
+ setConfirmation('');
+ onConfirm();
+ };
+
+ const onChange = (event: React.ChangeEvent) => {
+ const targetValue = event.target.value ?? '';
+ setDisableChange(targetValue.toUpperCase() !== t('DELETE'));
+ setConfirmation(targetValue);
+ };
+
+ const onPressEnter = () => {
+ if (!disableChange) {
+ confirm();
+ }
+ };
return (
) => {
- const targetValue = event.target.value ?? '';
- setDisableChange(targetValue.toUpperCase() !== t('DELETE'));
- }}
+ value={confirmation}
+ onChange={onChange}
+ onPressEnter={onPressEnter}
/>