fix(player): prevent buttons from submitting a parent form (#974)

Author: ahulterstrom

packages/react/src/components/ui/buttons/caption-button.tsx

@@ -37,7 +37,7 @@ const CaptionButton = React.forwardRef<HTMLButtonElement, CaptionButtonProps>(
     return (
       <CaptionButtonBridge {...(props as Omit<CaptionButtonProps, 'ref'>)}>
         {(props) => (
-          <Primitive.button type="button" {...props} ref={composeRefs(props.ref, forwardRef)}>
+          <Primitive.button {...props} ref={composeRefs(props.ref, forwardRef)}>
             {children}
           </Primitive.button>
         )}

packages/react/src/components/ui/buttons/fullscreen-button.tsx

@@ -37,7 +37,7 @@ const FullscreenButton = React.forwardRef<HTMLButtonElement, FullscreenButtonPro
     return (
       <FullscreenButtonBridge {...(props as Omit<FullscreenButtonProps, 'ref'>)}>
         {(props) => (
-          <Primitive.button type="button" {...props} ref={composeRefs(props.ref, forwardRef)}>
+          <Primitive.button {...props} ref={composeRefs(props.ref, forwardRef)}>
             {children}
           </Primitive.button>
         )}

packages/react/src/components/ui/buttons/live-button.tsx

@@ -38,7 +38,7 @@ const LiveButton = React.forwardRef<HTMLButtonElement, LiveButtonProps>(
     return (
       <LiveButtonBridge {...(props as Omit<LiveButtonProps, 'ref'>)}>
         {(props) => (
-          <Primitive.button type="button" {...props} ref={composeRefs(props.ref, forwardRef)}>
+          <Primitive.button {...props} ref={composeRefs(props.ref, forwardRef)}>
             {children}
           </Primitive.button>
         )}

packages/react/src/components/ui/buttons/mute-button.tsx

@@ -42,7 +42,7 @@ const MuteButton = React.forwardRef<HTMLButtonElement, MuteButtonProps>(
     return (
       <MuteButtonBridge {...(props as Omit<MuteButtonProps, 'ref'>)}>
         {(props) => (
-          <Primitive.button type="button" {...props} ref={composeRefs(props.ref, forwardRef)}>
+          <Primitive.button {...props} ref={composeRefs(props.ref, forwardRef)}>
             {children}
           </Primitive.button>
         )}

packages/react/src/components/ui/buttons/pip-button.tsx

@@ -36,7 +36,7 @@ const PIPButton = React.forwardRef<HTMLButtonElement, PIPButtonProps>(
     return (
       <PIPButtonBridge {...(props as Omit<PIPButtonProps, 'ref'>)}>
         {(props) => (
-          <Primitive.button type="button" {...props} ref={composeRefs(props.ref, forwardRef)}>
+          <Primitive.button {...props} ref={composeRefs(props.ref, forwardRef)}>
             {children}
           </Primitive.button>
         )}

packages/react/src/components/ui/buttons/play-button.tsx

@@ -35,7 +35,7 @@ const PlayButton = React.forwardRef<HTMLButtonElement, PlayButtonProps>(
     return (
       <PlayButtonBridge {...(props as Omit<PlayButtonProps, 'ref'>)}>
         {(props) => (
-          <Primitive.button type="button" {...props} ref={composeRefs(props.ref, forwardRef)}>
+          <Primitive.button {...props} ref={composeRefs(props.ref, forwardRef)}>
             {children}
           </Primitive.button>
         )}

packages/react/src/components/ui/buttons/seek-button.tsx

@@ -37,7 +37,7 @@ const SeekButton = React.forwardRef<HTMLButtonElement, SeekButtonProps>(
     return (
       <SeekButtonBridge {...(props as Omit<SeekButtonProps, 'ref'>)}>
         {(props) => (
-          <Primitive.button type="button" {...props} ref={composeRefs(props.ref, forwardRef)}>
+          <Primitive.button {...props} ref={composeRefs(props.ref, forwardRef)}>
             {children}
           </Primitive.button>
         )}

packages/react/src/components/ui/buttons/toggle-button.tsx

@@ -35,7 +35,7 @@ const ToggleButton = React.forwardRef<HTMLButtonElement, ToggleButtonProps>(
     return (
       <ToggleButtonBridge {...(props as Omit<ToggleButtonProps, 'ref'>)}>
         {(props) => (
-          <Primitive.button type="button" {...props} ref={composeRefs(props.ref, forwardRef)}>
+          <Primitive.button {...props} ref={composeRefs(props.ref, forwardRef)}>
             {children}
           </Primitive.button>
         )}

packages/vidstack/src/components/ui/buttons/live-button.ts

@@ -54,6 +54,7 @@ export class LiveButton extends Component<LiveButtonProps> {
   protected override onAttach(el: HTMLElement): void {
     setAttributeIfEmpty(el, 'tabindex', '0');
     setAttributeIfEmpty(el, 'role', 'button');
+    setAttributeIfEmpty(el, 'type', 'button');
     el.setAttribute('data-media-tooltip', 'live');
   }
 

packages/vidstack/src/components/ui/buttons/seek-button.ts

@@ -57,6 +57,7 @@ export class SeekButton extends Component<SeekButtonProps> {
   protected override onAttach(el: HTMLElement) {
     setAttributeIfEmpty(el, 'tabindex', '0');
     setAttributeIfEmpty(el, 'role', 'button');
+    setAttributeIfEmpty(el, 'type', 'button');
     el.setAttribute('data-media-tooltip', 'seek');
     setARIALabel(el, this._getLabel.bind(this));
   }