[joy-ui][Accordion] The expand button acts as type="submit" by default

[maakcode]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Basic working code:

<form>
  <AccordionGroup>
    <Accordion>
      <AccordionSummary>Title</AccordionSummary>
      <AccordionDetails>Content</AccordionDetails>
    </Accordion>
  </AccordionGroup>
</form>

Steps:

1. Add a mui-joy accodion within a form tag
2. Click the expand button

Current behavior 😯

It works the same as using AccordionSummary's slot prop for button type='Submit'.

<form>
  <AccordionGroup>
    <Accordion>
      <AccordionSummary slotProps={{ button: { type: 'submit' } }}>
        Title
      </AccordionSummary>
      <AccordionDetails>Content</AccordionDetails>
    </Accordion>
  </AccordionGroup>
</form>

Expected behavior 🤔

It should work the same as using the slotprop of AccordionSummary for button type='button'.

<form>
  <AccordionGroup>
    <Accordion>
      <AccordionSummary slotProps={{ button: { type: 'button' } }}>
        Title
      </AccordionSummary>
      <AccordionDetails>Content</AccordionDetails>
    </Accordion>
  </AccordionGroup>
</form>

Context 🔦

I created a settings page for the user. Settings page information is contained within form elements, and accordion elements are used in the middle of the page to provide detailed guide information. When I used the accordion component, I thought the accordion component would not interact with the form elements. But it was.

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

  System:
    OS: macOS 14.0
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.1/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
  Browsers:
    Chrome: 118.0.5993.88
    Edge: 114.0.1823.37
    Safari: 17.0
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.10 
    @mui/core-downloads-tracker:  5.14.14 
    @mui/icons-material: ^5.14.3 => 5.14.3 
    @mui/joy: ^5.0.0-beta.0 => 5.0.0-beta.11 
    @mui/material: ^5.14.4 => 5.14.4 
    @mui/private-theming:  5.14.14 
    @mui/styled-engine:  5.14.12 
    @mui/system:  5.14.14 
    @mui/types:  7.2.5 
    @mui/utils:  5.14.14 
    @types/react: 18.2.16 => 18.2.16 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 5.1.6 => 5.1.6 

• Safari 17.0

[Harshsharmaa28]

@maakcode assing me this issue

[KumarNitin19]

@maakcode I have started working on this issue. Please assign this to me.

[Harshsharmaa28]

@maakcode i have come first and already started working

[oliviertassinari]

Same class of bug as #39262