fix(ui): ensure Form submit button only uses onClick handler when needed, as that was causing issues with password manager extensions

packages/richtext-lexical/src/features/blocks/client/component/index.tsx

@@ -443,7 +443,7 @@ export const BlockComponent: React.FC<Props> = (props) => {
                 permissions={permissions}
                 readOnly={false}
               />
-              <FormSubmit>{t('fields:saveChanges')}</FormSubmit>
+              <FormSubmit programmaticSubmit={true}>{t('fields:saveChanges')}</FormSubmit>
             </>
           ) : null}
         </Drawer>

packages/richtext-lexical/src/features/blocks/client/componentInline/index.tsx

@@ -391,7 +391,7 @@ export const InlineBlockComponent: React.FC<Props> = (props) => {
                 permissions={permissions}
                 readOnly={false}
               />
-              <FormSubmit>{t('fields:saveChanges')}</FormSubmit>
+              <FormSubmit programmaticSubmit={true}>{t('fields:saveChanges')}</FormSubmit>
             </>
           ) : null}
         </Drawer>

packages/ui/src/elements/Button/types.ts

@@ -21,6 +21,14 @@ export type Props = {
   newTab?: boolean
   onClick?: (event: MouseEvent) => void
   onMouseDown?: (event: MouseEvent) => void
+  /**
+   * Enables form submission via an onClick handler. This is only needed if
+   * type="submit" does not trigger form submission, e.g. if the button DOM
+   * element is not a direct child of the form element.
+   *
+   * @default false
+   */
+  programmaticSubmit?: boolean
   round?: boolean
   secondaryActions?: secondaryAction | secondaryAction[]
   size?: 'large' | 'medium' | 'small'

packages/ui/src/forms/Submit/index.tsx

@@ -10,26 +10,36 @@ import './index.scss'
 const baseClass = 'form-submit'
 
 export const FormSubmit = forwardRef<HTMLButtonElement, Props>((props, ref) => {
-  const { type = 'submit', buttonId: id, children, disabled: disabledFromProps, onClick } = props
+  const {
+    type = 'submit',
+    buttonId: id,
+    children,
+    disabled: disabledFromProps,
+    onClick,
+    programmaticSubmit,
+  } = props
   const processing = useFormProcessing()
   const initializing = useFormInitializing()
   const { disabled, submit } = useForm()
 
   const canSave = !(disabledFromProps || initializing || processing || disabled)
 
+  const handleClick =
+    onClick ??
+    (programmaticSubmit
+      ? () => {
+          void submit()
+        }
+      : undefined)
+
   return (
     <div className={baseClass}>
       <Button
         ref={ref}
         {...props}
         disabled={canSave ? undefined : true}
         id={id}
-        onClick={
-          onClick ??
-          (() => {
-            void submit()
-          })
-        }
+        onClick={handleClick}
         type={type}
       >
         {children}