@squiz/formatted-text-editor 1.21.1-alpha.29 → 1.21.1-alpha.30

package/lib/ui/Modal/Modal.js

@@ -32,6 +32,7 @@ const CloseRounded_1 = __importDefault(require("@mui/icons-material/CloseRounded
 const base_1 = require("@mui/base");
 const clsx_1 = __importDefault(require("clsx"));
 const Modal = ({ children, title, onCancel, onSubmit, className }, ref) => {
+    const content = (0, react_1.useRef)(null);
     const container = (0, react_1.useMemo)(() => {
         const element = document.createElement('div');
         element.classList.add('squiz-fte-scope');
@@ -52,7 +53,7 @@ const Modal = ({ children, title, onCancel, onSubmit, className }, ref) => {
     }, []);
     // add/remove the modal container from the DOM and focus on the first input
     (0, react_1.useEffect)(() => {
-        const firstInput = container.querySelector('input:not([type=hidden])');
+        const firstInput = content.current?.querySelector('input:not([type=hidden]), button');
         document.body.appendChild(container);
         firstInput?.focus();
         return () => {
@@ -68,7 +69,7 @@ const Modal = ({ children, title, onCancel, onSubmit, className }, ref) => {
                             react_1.default.createElement("h2", { className: "font-semibold text-gray-900 text-heading-2" }, title),
                             react_1.default.createElement("button", { type: "button", className: "ml-auto -mr-3 -mt-3 bg-transparent border-0 text-gray-600 font-semibold outline-none focus:outline-none hover:text-color-gray-800", onClick: onCancel, "aria-label": "Close" },
                                 react_1.default.createElement(CloseRounded_1.default, null))),
-                        react_1.default.createElement("div", { className: "squiz-fte-modal-content" }, children),
+                        react_1.default.createElement("div", { className: "squiz-fte-modal-content", ref: content }, children),
                         react_1.default.createElement("div", { className: "squiz-fte-modal-footer p-6 pt-3" },
                             react_1.default.createElement("button", { className: "squiz-fte-modal-footer__button bg-gray-200 text-gray-700 mr-2 hover:bg-gray-300", type: "button", onClick: onCancel, "aria-label": "Cancel" }, "Cancel"),
                             onSubmit && (react_1.default.createElement("button", { className: "squiz-fte-modal-footer__button bg-blue-300 text-white hover:bg-blue-400", type: "button", onClick: onSubmit, "aria-label": "Apply" }, "Apply"))))))),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.21.1-alpha.29",
+  "version": "1.21.1-alpha.30",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -74,5 +74,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "a3dd998d5306d0686f53772cf209eaf28e678bf2"
+  "gitHead": "f5498d948f7c520758c3cbc1d11416f924d521aa"
 }

package/src/ui/Modal/Modal.spec.tsx

@@ -2,6 +2,8 @@ import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
 import Modal from './Modal';
+import { Select } from '../Fields/Select/Select';
+import { Input } from '../Fields/Input/Input';
 
 describe('Modal', () => {
   const mockOnCancel = jest.fn();
@@ -110,4 +112,17 @@ describe('Modal', () => {
 
     expect(screen.getByLabelText('My input')).toHaveFocus();
   });
+
+  it('Auto-focuses on the first select field on mount', () => {
+    render(
+      <Modal title="Modal title" onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+        <>
+          <Select label="Dropdown" name="select" options={{}} />
+          <Input label="Input" name="input" />
+        </>
+      </Modal>,
+    );
+
+    expect(screen.getByLabelText('Dropdown')).toHaveFocus();
+  });
 });

package/src/ui/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, forwardRef, ReactElement, useEffect, useMemo } from 'react';
+import React, { ForwardedRef, forwardRef, ReactElement, useEffect, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import { FocusTrap } from '@mui/base';
@@ -16,6 +16,7 @@ const Modal = (
   { children, title, onCancel, onSubmit, className }: ModalProps,
   ref: ForwardedRef<HTMLDivElement>,
 ): ReactElement => {
+  const content = useRef<HTMLDivElement>(null);
   const container = useMemo(() => {
     const element = document.createElement('div');
     element.classList.add('squiz-fte-scope');
@@ -38,7 +39,7 @@ const Modal = (
 
   // add/remove the modal container from the DOM and focus on the first input
   useEffect(() => {
-    const firstInput = container.querySelector('input:not([type=hidden])') as HTMLInputElement;
+    const firstInput = content.current?.querySelector('input:not([type=hidden]), button') as HTMLElement;
 
     document.body.appendChild(container);
     firstInput?.focus();
@@ -65,7 +66,9 @@ const Modal = (
                   <CloseRoundedIcon />
                 </button>
               </div>
-              <div className="squiz-fte-modal-content">{children}</div>
+              <div className="squiz-fte-modal-content" ref={content}>
+                {children}
+              </div>
               <div className="squiz-fte-modal-footer p-6 pt-3">
                 <button
                   className="squiz-fte-modal-footer__button bg-gray-200 text-gray-700 mr-2 hover:bg-gray-300"