React-beautiful-dnd: @atlastkit/tree doesn't add placeholder element

[ianschmitz]

Sorry if this the wrong forum for the issue. I didn't see any obvious place to post issues on the BitBucket side. This is somewhat related to a previous issue i posted: https://github.com/atlassian/react-beautiful-dnd/issues/1162

Bug or feature request?

Bug

Expected behavior

The @atlaskit/Tree component renders the provided.placeholder in the Droppable.

Actual behavior

No placeholder is rendered. See https://bitbucket.org/atlassian/atlaskit-mk-2/src/f8172af305826842a56ea6f0f31643c38e135656/packages/core/tree/src/components/Tree/Tree.js?at=master&fileviewer=file-view-default#Tree.js-282:310

Steps to reproduce

See demo below

What version of React are you using?

16.8.4

What version of react-beautiful-dnd are you running?

10.1.0

What browser are you using?

Latest Chrome

Demo

See the console in the following demo. react-beautiful-dnd gets quite upset when there is no placeholder rendered, and because of such the height/width of scroll container changes which also makes it upset :).

https://codesandbox.io/s/x3m88q6rrw

[alexreardon]

We are currently tracking @atlaskit/tree issues here: https://ecosystem.atlassian.net/servicedesk/customer/portal/24/create/236

I will be adding this to our upcoming issue templates

[alexreardon]

I have also passed this on internally to the team that looks after tree

[nelsonpecora]

Hi folks, I'm encountering this as well. I couldn't find anything referencing it in https://ecosystem.atlassian.net/servicedesk/customer/portal/24/create/236. Any good news?

[spencerkingman-niche]

Updating my react-dom dependency from 16.1.2 to 16.4.2 made the provided.placeholder start rendering for me. I am on react 16.6.3 and react-beautiful-dnd 10.1.1.

[cusxio]

Patch it in the meantime

class PatchTree extends Tree {
  render() {
    const { isNestingEnabled } = this.props;
    const renderedItems = this.renderItems();

    return (
      <DragDropContext
        onDragStart={this.onDragStart}
        onDragEnd={this.onDragEnd}
        onDragUpdate={this.onDragUpdate}
      >
        <Droppable
          droppableId="tree"
          isCombineEnabled={isNestingEnabled}
          ignoreContainerClipping
        >
          {dropProvided => {
            const finalProvided = this.patchDroppableProvided(dropProvided);
            return (
              <div
                ref={finalProvided.innerRef}
                style={{ pointerEvents: "auto" }}
                onTouchMove={this.onPointerMove}
                onMouseMove={this.onPointerMove}
                {...finalProvided.droppableProps}
              >
                {renderedItems}
                {dropProvided.placeholder}
              </div>
            );
          }}
        </Droppable>
      </DragDropContext>
    );
  }
}

[nelsonpecora]

Hi, has there been any update on this?

[hugw]

@alexreardon Hello!
Do you happen to have any information regarding this issue?
The url¹ you provided months ago is returning a 404 page which makes it impossible to track it.

1. https://ecosystem.atlassian.net/servicedesk/customer/portal/24/create/236

Thank you in advance!

[antoniojps]

Any updates? Seems like a forgotten issue.

[jagaapple]

@cusxio Could you use that way?
When I replaced Tree Component with PatchTree , Could not find "store" in the context of "Connect(Draggable)" error has occurred.

https://codesandbox.io/s/atlaskittree-patch-tree-u7rqc

[satanworker]

I know that's not an exact place to ask a question about @atlaskit and I apologize in advance. But please if anybody has any info about where to take a look to find info about tree package that would be awesome!
I'm trying to use a tree with rbd but it seems it's using an outdated version of react beautiful dnd and I can't find anything except
https://atlaskit.atlassian.com/packages/core/tree.
rbd is so good I can't believe atlaskit is so frustrating

[cusxio]

@jagaapple

You need to import from react-beautiful-dnd-next because that is what the Tree package depends on. Unfortunately, that means that you are stuck using v11 on rb-dnd.

https://codesandbox.io/s/atlaskittree-patch-tree-dxmzu

@satanworker , you mean the source code?
https://bitbucket.org/atlassian/atlaskit-mk-2/src/master/packages/core/tree/

[petermikitsh]

Hi @alexreardon, got 2 things here:

1. Bug discussed in this issue

Per the @atlaskit/tree changelog:

8.1.0

Minor Changes

 

• 5584033c5e - Fixed missing react beautiful D&D placeholder behavior

It sounds like this issue was addressed, though I'm observing the runtime exception on v8.1.1:

Edit: The above exception can be mitigated by wrapping the tree in a <div style={{height: 200, overflow: 'scroll'}}>...</div>. Resolved.

2. Public Mirror

The atlaskit-mk-2 repo says non-Atlassian developers should reference the public mirror, but I couldn't find @atlaskit/tree in the public mirror.

The FAQ (last updated in February 2020):

Why have these components all been moved / close sourced?

In an effort to improve how we manage frontend code across Atlassian, we needed to first co-locate all our front end code in the same place. As a result, we decided to close the Atlaskit repo for a short period of time before re-opening it. You can still view the source (Link coming very soon, this week for certain!)

Could we get the latest source code available in the public mirror? Thanks!

---

Side note: I wish I could contribute to @atlaskit/tree, RBD v13 has made great progress since v11, and I noticed @atlaskit/tree is on a fork of v11.