Transformation is not set correctly for dropdown menu when direction is up

[pbugnion]

When creating a dropdown menu with direction == 'up', items do not show correctly. In particular, the style bottom is not set to auto and the transformation that is supposed to push the items above the dropdown is wrong.

[pbugnion]

Cause

tl;dr this is caused by dash using react 15, not 16.

Long version:

Setting direction = "up" as a prop works in Demo.js.

By looking at the reactstrap source code, reactstrap injects a prop called x-placement in RSDropdownMenu that changes depending on the dropdown direction.

Bootstrap then uses a selector based on x-placement to move the popup to the correct place.

The x-placement attribute is not a standard DOM attribute. It's just a bootstrap thing. In HTML, I believe you can inject arbitrary attributes on divs, but the expectation is that you use data attributes. Your custom attributes should start with data-. Bootstrap ignores this convention, presumably because it pre-dates it.

Up to React 15, any extra attributes passed to <div /> (or any other JSX DOM elements) just gets silently stripped out. In React 16, they get passed through. See here for changelog.

Thus, in Demo.js which uses React 16, the x-placement attribute makes its way into the DOM, where it is picked up by the bootstrap CSS.

When we use dash-renderer, the x-placement attribute gets stripped out. Because Dash silences React warnings, we don't see a console warning like Warning: Unknown prop x-placement on <div> tag (see this issue on Reactstrap for someone with similar problems), making it even harder to diagnose. The x-placement attribute is just missing from the div.

---

Moving forwards

I suggest finding out when dash-renderer is planning to move to React 16 and waiting till then. In the meantime, we can just disable direction = "up" in the prop types. @tcbegley If you're happy with that I can submit a quick PR.

[pbugnion]

Dash-renderer has a PR for migrating to React 16:

plotly/dash-renderer#97

[tcbegley]

That’s some top investigative work, thanks @pbugnion! I think disabling the “up” option for now is the best thing, let’s log this as something to return to when dash renderer moves to react 16 along with support for modals.

[pbugnion]

Closing this in favour of issue #65, which is more up-to-date. Thank you!