Develop Reference

react-beautiful-dnd doesn’t work properly with react-virtualized Table component

Expected behaviour
Row should get dragged to its destination index when dragged from top to bottom and vice versa with DnD animation.
Actual behaviour
Row doesn’t get DnD when dragged from bottom to top index. Top to bottom drag works but the item is added after the last page index and not to the destination index. DnD animation seems not to be working as well.
Steps to reproduce
You can refer this sandbox to replicate the issue.
Case 1: Top to bottom drag
Try to drag and the row from top to bottom index
you will see the row gets dragged to last index of the page not the destination index
Case 2. Bottom to Top drag
Try to drag and the row from bottom to top index
you will observe the rows doesn’t get dragged and onDragEnd is not called.
The same code works with react-virtualized's List component but not the Table component.
What version of React are you using?
16.13.0
What version of react-beautiful-dnd are you running?
13.0.0
What version of react-virtualized are you running?
9.22.3
What browser are you using?
Chrome
Demo
I have created this sandbox to replicate the issue. You can run this to check the issue.
https://codesandbox.io/s/vertical-list-forked-3lp71?file=/index.js
Can anyone take a look at the sandbox and help me out? Let me know if you need another info!
Edit
So today, I debug this more and made some progress. Looks like the issue was with rowRenderer implementation. There was an extra wrapper div on top of defaultRowRenderer's dom. I was able to solve the issue partially. Here is the new sandbox link with the updated code.
Now, there's one issue left is scroll doesn't work while dragging the row. Any pointers how can I fix this?

Finally, solved the issue (not sure if this is the right way). The solution was to pass ref as react virtualized scrolling wrapper div instead of react-virtualized main wrapper div.
I had updated the above sandbox with the fix.
Before
ref={(ref) => {
if (ref) {
// eslint-disable-next-line react/no-find-dom-node
const whatHasMyLifeComeTo = ReactDOM.findDOMNode(ref);
if (whatHasMyLifeComeTo instanceof HTMLElement) {
provided.innerRef(whatHasMyLifeComeTo);
}
}
}}
After (fix)
ref={(ref) => {
if (ref) {
const whatHasMyLifeComeTo = document.getElementsByClassName(
"ReactVirtualized__Grid ReactVirtualized__Table__Grid"
)[0];
if (whatHasMyLifeComeTo instanceof HTMLElement) {
provided.innerRef(whatHasMyLifeComeTo);
}
}
}}

Layout breaks when Material Ui grid wrapped in div element

I have responsive dashboard build with Material Ui Grid elements.
And one of the grid items wrapped in div element which breaks the layout.
Here is playground with div element - https://codesandbox.io/s/basicgrid-material-demo-forked-pkkil?file=/demo.js
Here is playground without div element, and this how it should be with div - https://codesandbox.io/s/b1wsf?file=/demo.js
div element cannot be replaced or removed...
Any suggestions?

Mui Grid component is designed the way that Grid container should always be parent of Grid item prop. Grid container is cloning Grid item and passing to it additional configuration it is not based on react context.
Only sane way to get this working is to remove div.
Or provide custom css styles to this to emulate grid spacing.

components above react-native-tabs-section-list

I'm using this library https://github.com/bogoslavskiy/react-native-tabs-section-list
I want to put the components in the same screen above that tabs-section-list component when I pass property ListHeaderComponent={aboveMyListComps}
The component aboveMyListComps is being placed between the tabs and the section list.
I have already tried wrapping the whole screen inside a scroll view as a result either my tabs header scroll away from the screen, or when I try to use stickyHeaderIndices property of the tabs-section-list doesn't scroll.
example of the issue
In this example I want my text 'TEST' to be above the header tabs list

How do I get ul-tree items to stay still while sortable()-dragging?

I'm building a jQuery based tree menu using jQuery sortable(). Here is my current code: http://jsfiddle.net/8KDur/.
As you see, the sortable function works fine.
But, the ui-behavior while dragging a tree li-item over the other tree items doesn't work the way I wish too. I want the li-items to stay still and the border between them highlight while dragging. Indicating between which items it will be placed.
So, how do I get the items to stay still while dragging?
I'd rather not use plugins for this.

You can use the placeholder option to specify a CSS class to use as the border between the items. Then, set helper to 'clone' which will create a duplicate of the list item you are dragging. By default, jQuery UI will hide the helper using an in-line display: none, so it may be necessary to override that if you want the list item to remain visible and static.
http://jsfiddle.net/8KDur/33/

Javascript drop down menu widget

I have a menu consisting of an <ul> in a Web CMS.
I want several menu items to have sub-items that are displayed in a dropdown list. These sub-items are <ul>s as well.
This is basically easy to do with a few lines of CSS and Javascript, but I am looking for a ready-made Javascript solution that helps me handle the following:
Deal with screen edge situations: If any part the dropdown menu would be outside the current viewport, place it so that it is completely within the viewport.
This is a bitch to code from scratch.
"Nice to have"s would be:
Centered positioning below the drop-down button
Adding a onclick event to the body so that clicking outside the drop down menu will close it; clean removal of the onclick event afterwards
But those I can do myself if necessary.
A nice, small, unobtrusive widget that magically converts my <ul> would be lovely.
If the solution is based on a framework, it has to be Prototype as that's what I'm using in the CMS.

You can get the offsets of the UL, and check whether those are in a certain distance of the viewport.
// Pseudo code
var ul = document.getElementById("menu");
if(ul.offset.x + ul.width > viewport.width) {
ul.offset.x = viewport.width - ul.width;
}
It's also possible to get the exact position of the dropdown button clicked, and then you should apply basic math in order to position the menu beneath it.