@kaizen/components 1.42.7 → 1.44.0

package/src/Modal/InputEditModal/_docs/InputEditModal.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useRef, useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { fn } from "@storybook/test"
 import isChromatic from "chromatic"
@@ -101,3 +101,65 @@ export const Unpadded: Story = {
   args: { unpadded: true },
   ...chromaticModalSettings,
 }
+
+export const OnAfterEnter: Story = {
+  ...chromaticModalSettings,
+  args: {
+    title: "Create new link",
+    submitLabel: "Add link",
+  },
+  render: args => {
+    const [isOpen, setIsOpen] = useState(IS_CHROMATIC)
+    const inputRef = useRef<HTMLInputElement>(null)
+    const handleOpen = (): void => setIsOpen(true)
+    const handleClose = (): void => setIsOpen(false)
+
+    return (
+      <>
+        <button
+          type="button"
+          className="border border-gray-500"
+          onClick={handleOpen}
+        >
+          Create a link
+        </button>
+        <InputEditModal
+          {...args}
+          isOpen={isOpen}
+          onSubmit={handleClose}
+          onDismiss={handleClose}
+          onAfterEnter={() => inputRef.current?.focus()}
+        >
+          <form>
+            <TextField inputRef={inputRef} labelText="Link URL" />
+          </form>
+        </InputEditModal>
+      </>
+    )
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+        // The label of the button and the input it is focused to may provide enough context.
+        <button
+          onClick={handleOpen}
+        >
+          Create a link
+        </button>
+        <InputEditModal
+          {...args}
+          isOpen={isOpen}
+          onSubmit={handleClose}
+          onDismiss={handleClose}
+          onAfterEnter={() => inputRef.current?.focus()}
+        >
+          <form>
+            <TextField inputRef={inputRef} labelText="Link URL" />
+          </form>
+        </InputEditModal>
+        `,
+      },
+    },
+  },
+}

package/src/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.tsx

@@ -44,6 +44,7 @@ export const LinkModal = ({
       onSubmit={handleSubmit}
       onDismiss={onDismiss}
       onAfterLeave={onAfterLeave}
+      onAfterEnter={() => inputRef.current?.focus()}
     >
       <TextField
         id="href"