fix(Dialog): focus on first primary button or input with autofocus

Author: tenphi

.changeset/giant-monkeys-sing.md

@@ -2,4 +2,4 @@
 '@cube-dev/ui-kit': minor
 ---
 
-When a dialog is opened focus on the first primary button.
+When a dialog is opened focus on the first input with autofocus or primary button.

src/components/fields/TextInput/TextInputBase.tsx

@@ -353,6 +353,7 @@ function _TextInputBase(props: CubeTextInputBaseProps, ref) {
         rows={multiLine ? rows : undefined}
         mods={modifiers}
         style={textSecurityStyles}
+        data-autofocus={autoFocus ? '' : undefined}
         autoFocus={autoFocus}
         data-size={size}
         autocomplete={autocomplete}

src/components/overlays/Dialog/Dialog.tsx

@@ -163,9 +163,11 @@ export const Dialog = forwardRef(function Dialog(
 
   return (
     // This component is actually traps the focus inside the dialog.
-    <FocusLock returnFocus disabled={!isEntered || context.type === 'panel'}>
-      {/* FocusScope has a bug that prevents selection and blurring in the dialog. */}
-      {/* But we need it to make the autofocus work. */}
+    <FocusLock
+      returnFocus
+      autoFocus={false}
+      disabled={!isEntered || context.type === 'panel'}
+    >
       {content}
     </FocusLock>
   );
@@ -217,7 +219,7 @@ const DialogContent = forwardRef(function DialogContent(
         ) {
           (
             domRef.current.querySelector(
-              '[data-qa="ButtonGroup"] button[data-type="primary"]',
+              'input[data-autofocus], [data-qa="ButtonGroup"] button[data-type="primary"]',
             ) as HTMLButtonElement
           )?.focus();
         }

src/components/overlays/Dialog/DialogTrigger.tsx

@@ -10,6 +10,7 @@ import {
   Placement,
 } from 'react-aria';
 
+import { useIsFirstRender } from '../../../_internal/index';
 import { useCombinedRefs } from '../../../utils/react/index';
 import { Modal, Popover, Tray, WithCloseBehavior } from '../Modal';
 import { Styles } from '../../../tasty';
@@ -229,7 +230,7 @@ function PopoverTrigger(allProps) {
     ...props
   } = allProps;
 
-  let triggerRef = useRef<HTMLElement>(null);
+  let triggerRef = useRef<HTMLButtonElement>(null);
   let overlayRef = useRef<HTMLDivElement>(null);
 
   let {
@@ -299,6 +300,7 @@ function PopoverTrigger(allProps) {
 
 function DialogTriggerBase(props) {
   const ref = useCombinedRefs(props.ref);
+  const isFirstRender = useIsFirstRender();
 
   let {
     type,
@@ -309,7 +311,6 @@ function DialogTriggerBase(props) {
     triggerProps = {},
     overlay,
     trigger,
-    hideOnClose,
   } = props;
 
   let context = {
@@ -320,9 +321,9 @@ function DialogTriggerBase(props) {
     ...dialogProps,
   };
 
-  // Restore focus manually when the dialog closes and has `hideOnClose` set to true
+  // Restore focus manually when the dialog closes
   useEffect(() => {
-    if (!state.isOpen && hideOnClose) {
+    if (!state.isOpen && !isFirstRender) {
       setTimeout(() => {
         ref.current?.focus();
       });

src/components/overlays/Dialog/stories/Dialog.stories.tsx

@@ -18,6 +18,7 @@ import {
   Title,
   Space,
   DirectionIcon,
+  TextInput,
 } from '../../../../index';
 import { timeout } from '../../../../utils/promise';
 import { baseProps } from '../../../../stories/lists/baseProps';
@@ -65,6 +66,37 @@ const Template: StoryFn<
   );
 };
 
+const TemplateWithInput: StoryFn<
+  CubeDialogTriggerProps & { size: CubeDialogProps['size'] }
+> = ({ size, styles, ...props }) => {
+  return (
+    <DialogTrigger {...props}>
+      <Button>Click me!</Button>
+      {(close) => (
+        <Dialog size={size} styles={styles}>
+          <Header>
+            <Title>Modal title</Title>
+            <Text>Header</Text>
+          </Header>
+          <Content>
+            <TextInput autoFocus label="Text input" />
+          </Content>
+          <Footer>
+            <Button.Group>
+              <Button type="primary" onPress={close}>
+                Action
+              </Button>
+              <Button onPress={close}>Sec</Button>
+              <Button onPress={close}>Cancel</Button>
+            </Button.Group>
+            <Text>Footer</Text>
+          </Footer>
+        </Dialog>
+      )}
+    </DialogTrigger>
+  );
+};
+
 const WithTriggerStateTemplate: StoryFn<
   CubeDialogTriggerProps & { size: CubeDialogProps['size'] }
 > = ({ size, styles, ...props }) => {
@@ -95,6 +127,9 @@ Default.play = async ({ canvasElement, viewMode }) => {
   await expect(await findByRole('dialog')).toBeInTheDocument();
 };
 
+export const WithInput = TemplateWithInput.bind({});
+WithInput.play = Default.play;
+
 export const Modal: typeof Template = Template.bind({});
 Modal.args = {
   type: 'modal',