title: How do I disable Accordion propagation after it has been clicked for the first time?
body: <p>I have an <code>Accordion</code> with a <code>TextField</code> in the <code>AccordionSummary</code> (Material-UI) which when clicked opens the <code>AccordionDetails</code> with the rest of the form however, I can't work out how to stop multiple clicks on the field from triggering propagation to open and close the accordion contents after the first click. I don't want the newly visible form contents to disappear after the first click in <code>AccountSummary</code>. I know how to disable propagation when the field is entered for the first time but not how to allow propagation only once?</p>
  <pre><code>import React from &quot;react&quot;;
  import { Formik, Field, Form } from &quot;formik&quot;;
  import { TextField, Select } from &quot;formik-material-ui&quot;;
  import Grid from &quot;@material-ui/core/Grid&quot;;
  import Box from &quot;@material-ui/core/Box&quot;;
  import FormControl from &quot;@material-ui/core/FormControl&quot;;
  import MenuItem from &quot;@material-ui/core/MenuItem&quot;;
  import Button from &quot;@material-ui/core/Button&quot;;
  import Accordion from &quot;@material-ui/core/Accordion&quot;;
  import MuiAccordionDetails from &quot;@material-ui/core/AccordionDetails&quot;;
  import MuiAccordionSummary from &quot;@material-ui/core/AccordionSummary&quot;;
  import { withStyles } from &quot;@material-ui/core/styles&quot;;
  
  const AccordionSummary = withStyles({
    root: {
      &quot;&amp;.Mui-focused&quot;: {
        backgroundColor: &quot;inherit&quot;
      }
    }
  })(MuiAccordionSummary);
  
  const AccordionDetails = withStyles({
    root: {
      paddingTop: 0
    }
  })(MuiAccordionDetails);
  
  export default function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Formik&gt;
          &lt;Form&gt;
            &lt;Accordion&gt;
              &lt;AccordionSummary&gt;
                &lt;FormControl fullWidth&gt;
                  &lt;Field
                    component={TextField}
                    name=&quot;itemName&quot;
                    placeholder=&quot;What do you want to buy?&quot;
                    variant=&quot;outlined&quot;
                  /&gt;
                &lt;/FormControl&gt;
              &lt;/AccordionSummary&gt;
              &lt;AccordionDetails&gt;
                &lt;Grid container&gt;
                  &lt;Grid item xs={2}&gt;
                    &lt;Box&gt;
                      &lt;FormControl fullWidth&gt;
                        &lt;Field
                          component={TextField}
                          name=&quot;quantity&quot;
                          label=&quot;Qty&quot;
                          type=&quot;number&quot;
                          variant=&quot;outlined&quot;
                          size=&quot;small&quot;
                        /&gt;
                      &lt;/FormControl&gt;
                    &lt;/Box&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item xs={2}&gt;
                    &lt;Box pl={1}&gt;
                      &lt;FormControl fullWidth&gt;
                        &lt;Field
                          component={TextField}
                          name=&quot;volume&quot;
                          label=&quot;Vol&quot;
                          type=&quot;number&quot;
                          variant=&quot;outlined&quot;
                          size=&quot;small&quot;
                        /&gt;
                      &lt;/FormControl&gt;
                    &lt;/Box&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item xs={2}&gt;
                    &lt;Box pl={1}&gt;
                      &lt;FormControl label=&quot;Type&quot; size=&quot;small&quot; fullWidth&gt;
                        &lt;Field
                          component={Select}
                          name=&quot;volumeType&quot;
                          as=&quot;select&quot;
                          variant=&quot;outlined&quot;
                        &gt;
                          &lt;MenuItem value=&quot;g&quot;&gt;grams&lt;/MenuItem&gt;
                          &lt;MenuItem value=&quot;kg&quot;&gt;kg&lt;/MenuItem&gt;
                          &lt;MenuItem value=&quot;ml&quot;&gt;ml&lt;/MenuItem&gt;
                          &lt;MenuItem value=&quot;cl&quot;&gt;cl&lt;/MenuItem&gt;
                          &lt;MenuItem value=&quot;litre&quot;&gt;litre&lt;/MenuItem&gt;
                          &lt;MenuItem value=&quot;pint&quot;&gt;pint&lt;/MenuItem&gt;
                          &lt;MenuItem value=&quot;pack&quot;&gt;pack&lt;/MenuItem&gt;
                        &lt;/Field&gt;
                      &lt;/FormControl&gt;
                    &lt;/Box&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item xs={4}&gt;
                    &lt;Box pl={1}&gt;
                      &lt;FormControl fullWidth&gt;
                        &lt;Field
                          component={TextField}
                          name=&quot;brandName&quot;
                          label=&quot;Brand&quot;
                          variant=&quot;outlined&quot;
                          size=&quot;small&quot;
                        /&gt;
                      &lt;/FormControl&gt;
                    &lt;/Box&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item xs={2}&gt;
                    &lt;Box pl={1}&gt;
                      &lt;Button
                        type=&quot;submit&quot;
                        variant=&quot;contained&quot;
                        color=&quot;primary&quot;
                        disableElevation
                        fullWidth
                      &gt;
                        Add
                      &lt;/Button&gt;
                    &lt;/Box&gt;
                  &lt;/Grid&gt;
                &lt;/Grid&gt;
              &lt;/AccordionDetails&gt;
            &lt;/Accordion&gt;
          &lt;/Form&gt;
        &lt;/Formik&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><a href="https://codesandbox.io/s/gifted-maxwell-gp7kr?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit gifted-maxwell-gp7kr" /></a></p>