modal focus issue that kills latest chrome, dont show campaign type f… (

#388)

apps/ui/package.json

@@ -4,7 +4,7 @@
   "repository": "https://github.com/parcelvoy/platform",
   "dependencies": {
     "@fontsource/inter": "^4.5.14",
-    "@headlessui/react": "1.7.13",
+    "@headlessui/react": "1.7.18",
     "@heroicons/react": "^2.0.11",
     "@monaco-editor/react": "^4.4.6",
     "@popperjs/core": "^2.11.6",
@@ -25,7 +25,7 @@
     "react": "^18.2.0",
     "react-charts": "^3.0.0-beta.57",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.33.0",
+    "react-hook-form": "7.51.1",
     "react-hot-toast": "^2.4.0",
     "react-popper": "^2.3.0",
     "react-router-dom": "^6.4.2",

apps/ui/src/ui/Modal.tsx

@@ -1,5 +1,5 @@
 import { Dialog, Transition } from '@headlessui/react'
-import { Fragment, PropsWithChildren, ReactNode, useRef } from 'react'
+import { Fragment, PropsWithChildren, ReactNode } from 'react'
 import Button from './Button'
 import { CloseIcon } from './icons'
 import './Modal.css'
@@ -27,14 +27,14 @@ export default function Modal({
     size,
     zIndex = 999,
 }: PropsWithChildren<ModalProps>) {
-    const ref = useRef<HTMLDivElement>(null)
     return (
         <Transition.Root show={open} as={Fragment}>
-            <Dialog as="div"
+            <Dialog
+                as="div"
                 className={`modal ${size ?? 'small'}`}
                 onClose={onClose}
                 style={{ zIndex }}
-                initialFocus={ref}>
+            >
                 <Transition.Child
                     as={Fragment}
                     enter="transition-enter"
@@ -85,7 +85,7 @@ export default function Modal({
                                     </Dialog.Description>
                                 )
                             }
-                            <div className="modal-content" ref={ref}>
+                            <div className="modal-content">
                                 {children}
                             </div>
                             {
@@ -96,12 +96,15 @@ export default function Modal({
                                 )
                             }
                             {
-                                size !== 'fullscreen' && <Button
-                                    className="modal-close"
-                                    size="tiny"
-                                    variant="plain"
-                                    icon={<CloseIcon />}
-                                    onClick={() => onClose(false)} />
+                                size !== 'fullscreen' && (
+                                    <Button
+                                        className="modal-close"
+                                        size="tiny"
+                                        variant="plain"
+                                        icon={<CloseIcon />}
+                                        onClick={() => onClose(false)}
+                                    />
+                                )
                             }
                         </Dialog.Panel>
                     </Transition.Child>

apps/ui/src/views/campaign/CampaignForm.tsx

@@ -233,7 +233,7 @@ const TypeSelection = ({ campaign, form }: { campaign?: Campaign, form: UseFormR
     </>
 }
 
-export function CampaignForm({ campaign, onSave }: CampaignEditParams) {
+export function CampaignForm({ campaign, onSave, type }: CampaignEditParams) {
     const [project] = useContext(ProjectContext)
 
     const [providers, setProviders] = useState<Provider[]>([])
@@ -275,7 +275,7 @@ export function CampaignForm({ campaign, onSave }: CampaignEditParams) {
     return (
         <FormWrapper<CampaignCreateParams>
             onSubmit={async (item) => await handleSave(item)}
-            defaultValues={campaign ?? { type: 'blast' }}
+            defaultValues={campaign ?? { type: type ?? 'blast' }}
             submitLabel="Save"
         >
             {form => (
@@ -289,7 +289,9 @@ export function CampaignForm({ campaign, onSave }: CampaignEditParams) {
                         form={form}
                         name="tags"
                     />
-                    <TypeSelection campaign={campaign} form={form} />
+                    {
+                        !type && <TypeSelection campaign={campaign} form={form} />
+                    }
                     {
                         campaign
                             ? (