Skip to content

BBButton renders <button> without type, causing unintended form submission #82

Description

@Arthurk12

Describe the bug
BBButton renders its underlying <button> element without a type attribute. Per the HTML spec, a <button> with no type defaults to type="submit". As a result, any BBButton placed inside a <form> triggers a native form submission on click, on top of running its own onClick handler.

Consumers cannot opt out: ButtonProps (src/components/Button/type.ts) does not expose a type prop, so passing type="button" is rejected by TypeScript and would not be forwarded to the DOM node anyway.

All three render branches are affected — circle/squared, stacked and default. None of them sets type on Styled.Button:

  • src/components/Button/component.tsx:94 (circle / squared)
  • src/components/Button/component.tsx:126 (stacked)
  • src/components/Button/component.tsx:175 (default)
  • src/components/Button/styles.ts:163 — export const Button = styled.button<StyledButtonProps>

To Reproduce
Steps to reproduce the behavior:

  1. Render a BBButton inside a <form> that has no onSubmit handler:
<form>                                                                                                              
  <BBBTextAreaInput placeholder="Type something" />                                                                 
  <BBButton                                                                                                         
    layout="circle"
    icon={<SendIcon />}                                                                                             
    onClick={handleSend}                                                                                            
    ariaLabel="Send"
  />                                                                                                                
</form>
  1. Click the button.
  2. The onClick handler runs, and then the browser performs the form's default submission —
    a GET to the current URL, i.e. a full page navigation.
  3. Inside the BBB client that navigation hits the client's beforeunload handler, so the
    browser shows the "Reload site? Changes you made may not be saved." dialog. Confirming it
    drops the user out of the meeting.

Expected behavior
BBButton should render type="button" by default, as other component libraries do (MUI, Chakra, Radix). A button inside a form should not submit it unless the consumer explicitly asks for that.

Optionally, ButtonProps could also expose type?: 'button' | 'submit' | 'reset' defaulting to 'button', so a consumer that genuinely wants a submit button can opt in.

Actual behavior
The rendered <button> carries no type attribute and therefore behaves as type="submit".
Clicking a BBButton inside a form submits it and navigates the page, and there is no supported way to override this from the consumer side.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions