React-sortable-hoc: getContainer() cannot be a parent component

[jeanblanchard]

I wanted to use getContainer() in the SortableContainer HOC to set the scroll container to a parent component.

Unfortunately the getContainer() is called in SortableContainer.componentDidMount(), when the parent component is not yet mounted, so it returns undefined, and crashes.

Suggestion: allow specifying the container and scrollContainer separately in SortableContainer (adding a getScollContainer() function property would make the most sense; it would actually match the internal representation). Then lazily call getScrollContainer() when needed.

---

More information: basically the use case is the same as with useWindowAsScrollContainer, but where only part of the page scrolls.

[clauderic]

Hey @jeanblanchard,

I haven't tried reproducing this yet, but I believe you're right! Really hadn't thought of that edge-case when we implemented that feature.

If you'd like to contribute to this repo, I'd be happy to review a PR to solve this! 😄

[alex-vg]

@clauderic I need this feature too, could you merge the PR?

edit: I think the solution with getScrollContainer would be better than the PR with promise.

Btw. I solved this issue by adding the parent-container (a simple div that has scrollbars) as a condition to the SortableContainer like this in the render:
(scrollContainer is a prop in my wrapping component)
{this.props.scrollContainer && (<SortableContainer getContainer={() => this.props.scrollContainer} ... />)}
Ugly workaround but it works.

[aurels]

@alex-vg Hi, would you give me an example showing how you put a value into this.props.scrollContainer ?

[alex-vg]

  componentDidMount() {
    this.domNode = ReactDOM.findDOMNode(this);
  }

  getContainer = () => this.props.scrollContainer || this.domNode;

render() {
    return (
            <CustomSortableContainer
              ...
              getContainer={this.getContainer}
            />

Since I wanted to be able to set the container from the outside of the component, I added this.props.scrollContainer ||. Inside CustomSortableContainer, I resolve getContainer and just apply as a scrollContainer prop to a deeper component.

[aurels]

Thanks !

[clauderic]

Just to follow-up on this issue, the getContainer prop now accepts passing it a Promise that returns the container from a parent component

[lbhbrave]

Just to follow-up on this issue, the getContainer prop now accepts passing it a Promise that returns the container from a parent component

Would you mind give me a example how to use Promise to getContainer. I get the same problem as below and look for a solution. Thx very much

[NexxLuo]

The following code will report an error 'Cannot read property 'ownerDocument' of null'
codesandbox