[Accordion] can't access DOM node

[scottastrophic]

• This is a v1.x issue (v0.x is no longer maintained).
• I have searched the issues of this repository and believe that this is not a duplicate.

Context

I have custom component that creates a list of <ExpansionPanel>s which renders markup like this:

<ol>
  <li>
    <div>Summary</div>
    <div>Details</div>
  </li>
</ol>

I'm trying to use the pattern described in this issue to make these <li>s sortable.

But I think the draggableRef.hasAttribute is not a function Type error in my minimal reproduction is a result of

When the ref attribute is used on a custom class component, the ref object receives the mounted instance of the component as its current. (source)

So the dragHandle (which is meant to be the entire sortable item) is being passed the instance rather than the <li> itself, and it bugs out. I tried using <RootRef> (btw this FAQ should probably point to that helper now that it exists) but I think I may be Doing It Wrong™. Am I? Is what I'm trying to do possible, or do I need a wrapper? I tried avoiding the wrapper because that conflicted with the built-in pseudoselector margins.

Your Environment

Tech	Version
Material-UI	v1.2.1
React	v16.4.1

[oliviertassinari]

@scottastrophic I don't get what the this.listEl is for, you don't seem to be using it. Instead, why don't you do that?

-<RootRef rootRef={this.listEl}>
+<RootRef rootRef={provided.innerRef}>

It seems to work: https://codesandbox.io/s/ll8ppjklkl.

btw this FAQ should probably point to that helper now that it exists

Yes, it should! Do you want to submit a pull-request? :)

[scottastrophic]

Ah! Beautiful, thanks. I knew something was off. And sure, will make a docs PR.

[oliviertassinari]

@scottastrophic Anytime you want :)