You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by be...@apache.org on 2025/06/13 13:42:45 UTC
(superset) branch auto-focus-delete-modal created (now 8ef0b2813e)
This is an automated email from the ASF dual-hosted git repository.
beto pushed a change to branch auto-focus-delete-modal
in repository https://gitbox.apache.org/repos/asf/superset.git
at 8ef0b2813e chore: auto-focus modal input when deleting assets
This branch includes the following new commits:
new 8ef0b2813e chore: auto-focus modal input when deleting assets
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
(superset) 01/01: chore: auto-focus modal input when deleting assets
Posted by be...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
beto pushed a commit to branch auto-focus-delete-modal
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 8ef0b2813efbd9580e44c9f31c426ca01c6d4988
Author: Beto Dealmeida <ro...@dealmeida.net>
AuthorDate: Fri Jun 13 09:42:31 2025 -0400
chore: auto-focus modal input when deleting assets
---
.../src/components/DeleteModal/DeleteModal.test.tsx | 20 +++++++++++++++++---
.../src/components/DeleteModal/index.tsx | 10 +++++++++-
2 files changed, 26 insertions(+), 4 deletions(-)
diff --git a/superset-frontend/src/components/DeleteModal/DeleteModal.test.tsx b/superset-frontend/src/components/DeleteModal/DeleteModal.test.tsx
index 86e9ff21e8..3cf76bdfb9 100644
--- a/superset-frontend/src/components/DeleteModal/DeleteModal.test.tsx
+++ b/superset-frontend/src/components/DeleteModal/DeleteModal.test.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { render, screen, userEvent } from 'spec/helpers/testing-library';
+import { render, screen, userEvent, waitFor } from 'spec/helpers/testing-library';
import DeleteModal from '.';
test('Must display title and content', () => {
@@ -29,11 +29,25 @@ test('Must display title and content', () => {
};
render(<DeleteModal {...props} />);
expect(screen.getByTestId('test-title')).toBeInTheDocument();
- expect(screen.getByTestId('test-title')).toBeInTheDocument();
- expect(screen.getByTestId('test-description')).toBeInTheDocument();
expect(screen.getByTestId('test-description')).toBeInTheDocument();
});
+test('Input should autofocus when modal opens', async () => {
+ const props = {
+ title: <div data-test="test-title">Title</div>,
+ description: <div data-test="test-description">Description</div>,
+ onConfirm: jest.fn(),
+ onHide: jest.fn(),
+ open: true,
+ };
+ render(<DeleteModal {...props} />);
+ const input = screen.getByTestId('delete-modal-input');
+ // waitFor because focus may happen after render due to useEffect
+ await waitFor(() => {
+ expect(input).toHaveFocus();
+ });
+});
+
test('Calling "onHide"', () => {
const props = {
title: <div data-test="test-title">Title</div>,
diff --git a/superset-frontend/src/components/DeleteModal/index.tsx b/superset-frontend/src/components/DeleteModal/index.tsx
index 11991854de..bff3a02e20 100644
--- a/superset-frontend/src/components/DeleteModal/index.tsx
+++ b/superset-frontend/src/components/DeleteModal/index.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { t, styled } from '@superset-ui/core';
-import { useState, ReactNode, ChangeEvent } from 'react';
+import { useState, useRef, useEffect, ReactNode, ChangeEvent } from 'react';
import { Input } from 'src/components/Input';
import Modal from 'src/components/Modal';
import { FormLabel } from 'src/components/Form';
@@ -52,6 +52,13 @@ export default function DeleteModal({
}: DeleteModalProps) {
const [disableChange, setDisableChange] = useState(true);
const [confirmation, setConfirmation] = useState<string>('');
+ const inputRef = useRef<HTMLInputElement>(null);
+
+ useEffect(() => {
+ if (open && inputRef.current) {
+ inputRef.current.focus();
+ }
+ }, [open]);
const hide = () => {
setConfirmation('');
@@ -99,6 +106,7 @@ export default function DeleteModal({
value={confirmation}
onChange={onChange}
onPressEnter={onPressEnter}
+ inputRef={inputRef}
/>
</StyledDiv>
</Modal>