Doesn't work when collapsible element is a span

[oscaralanpierce]

Hello lovely maintainers! I've noticed what might be a little bug (or maybe intended behaviour?), described below, and I wondered if you'd be interested in a PR to add documentation for this. It took me some time to figure out how to fix my slide toggle and if you'd accept a docs PR I'd love to spare someone else the trouble.

My question for you is, is this either intended behaviour or a bug you're aware of, and if so, what are the boundaries - which tags are allowed for the collapsible elements and which aren't? No worries if you don't know - I'm happy to poke around a bit in a sandbox and find out.

The Issue

I've noticed an issue where the following code (using a span as the collapsible element) causes the collapsible element to just appear and disappear instantaneously, and not slide, when the trigger is clicked:

const ToggleComponent = () => {
  const [toggleEvent, setToggleEvent] = useState(0)

  const toggle = () => setToggleEvent(Date.now)

  return(
    <>
      <h3 onClick={toggle}>Toggle</h3>
      <SlideToggle toggleEvent={toggleEvent}>
        {({ setCollapsibleElement }) => (
          {/* this span breaks things */}
          <span ref={setCollapsibleElement}>
            <p>Toggle content</p>
          </span>
        )}
      </SlideToggle>
    </>
  )
}

When I switch the container element to a div, it works:

<>
  <h3 onClick={toggle}>Toggle</h3>
  <SlideToggle toggleEvent={toggleEvent}>
    {({ setCollapsibleElement }) => (
      {/* changing the span to a div fixes it */}
      <div ref={setCollapsibleElement}>
        <p>Toggle content</p>
      </div>
    )}
  </SlideToggle>
</>

If this is a bug I'm afraid I can't promise I have the expertise to fix it (although I'd be happy to if it turns out to be something straightforward), but in either case I'm happy to add some docs :)