EDSC-2895: Fix download granule dropdown in table view

static/src/js/components/GranuleResults/GranuleResultsDataLinksButton.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
 import { Dropdown } from 'react-bootstrap'
 import { PropTypes } from 'prop-types'
 
@@ -12,14 +13,15 @@ import './GranuleResultsDataLinksButton.scss'
  * @param {Object} props - The props passed into the component.
  * @param {Function} props.onClick - The click callback.null
  */
-class CustomDataLinksToggle extends Component {
+export class CustomDataLinksToggle extends Component {
   constructor(props, context) {
     super(props, context)
     this.handleClick = this.handleClick.bind(this)
   }
 
   handleClick(e) {
     e.preventDefault()
+    e.stopPropagation()
     const { onClick } = this.props
     onClick(e)
   }
@@ -60,31 +62,36 @@ export const GranuleResultsDataLinksButton = ({
     return (
       <Dropdown>
         <Dropdown.Toggle as={CustomDataLinksToggle} />
-        <Dropdown.Menu>
-          {
-            dataLinks.map((dataLink, i) => {
-              const key = `data_link_${i}`
-              let dataLinkTitle = dataLink.title
+        {
+          ReactDOM.createPortal(
+            <Dropdown.Menu>
+              {
+                dataLinks.map((dataLink, i) => {
+                  const key = `data_link_${i}`
+                  let dataLinkTitle = dataLink.title
 
-              if (!dataLinkTitle) dataLinkTitle = getFilenameFromPath(dataLink.href)
+                  if (!dataLinkTitle) dataLinkTitle = getFilenameFromPath(dataLink.href)
 
-              return (
-                <Dropdown.Item
-                  key={key}
-                  href={dataLink.href}
-                  onClick={() => onMetricsDataAccess({
-                    type: 'single_granule_download',
-                    collections: [{
-                      collectionId
-                    }]
-                  })}
-                >
-                  {dataLinkTitle}
-                </Dropdown.Item>
-              )
-            })
-          }
-        </Dropdown.Menu>
+                  return (
+                    <Dropdown.Item
+                      key={key}
+                      href={dataLink.href}
+                      onClick={() => onMetricsDataAccess({
+                        type: 'single_granule_download',
+                        collections: [{
+                          collectionId
+                        }]
+                      })}
+                    >
+                      {dataLinkTitle}
+                    </Dropdown.Item>
+                  )
+                })
+              }
+            </Dropdown.Menu>,
+            document.querySelector('#root')
+          )
+        }
       </Dropdown>
     )
   }

static/src/js/components/GranuleResults/__tests__/GranuleResultsDataLinksButton.test.js

@@ -1,9 +1,10 @@
 import React from 'react'
+import ReactDOM from 'react-dom'
 import Enzyme, { shallow } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 import { Dropdown } from 'react-bootstrap'
 
-import { GranuleResultsDataLinksButton } from '../GranuleResultsDataLinksButton'
+import { GranuleResultsDataLinksButton, CustomDataLinksToggle } from '../GranuleResultsDataLinksButton'
 import Button from '../../Button/Button'
 
 Enzyme.configure({ adapter: new Adapter() })
@@ -76,6 +77,9 @@ describe('GranuleResultsDataLinksButton component', () => {
 
   describe('with multiple granule links', () => {
     test('renders the correct element', () => {
+      // Mocks createPortal method of ReactDOM (https://stackoverflow.com/a/60953708/8116576)
+      ReactDOM.createPortal = jest.fn(dropdown => dropdown)
+
       const { enzymeWrapper } = setup({
         dataLinks: [
           {
@@ -93,3 +97,21 @@ describe('GranuleResultsDataLinksButton component', () => {
     })
   })
 })
+
+describe('CustomDataLinksToggle component', () => {
+  test('calls expected event methods on download click', () => {
+    const mockClickEvent = {
+      stopPropagation: jest.fn(),
+      preventDefault: jest.fn()
+    }
+
+    const mockClickCallback = jest.fn()
+
+    shallow(<CustomDataLinksToggle onClick={mockClickCallback} />)
+      .simulate('click', mockClickEvent)
+
+    expect(mockClickEvent.stopPropagation).toHaveBeenCalled()
+    expect(mockClickEvent.preventDefault).toHaveBeenCalled()
+    expect(mockClickCallback).toHaveBeenCalled()
+  })
+})