div based drop down menu in cells (react-select)

[fobbyal]

I am trying extended the FixedDataTable to add some editing features. Simple inputs were really easy. However I got stuck on drop-down type components. It seems that table cells does not work with any type of drop down that is implemented using div, position and z-index.

So i digged a little deeper and found the problem to be with some of the elements setting z-index and overflow:hidden. For the the current version 0.6.0, I am able to operate the drop-down component (react-seldct) iff i do the following in the chrome debugger.
(All of the following it is relative to the cell where the drop-down component is )

1. go up and find the first div.fixedDataTableCellLayout_main set overflow:visible;
2. go up and find the first div.fixedDataTableCellGroupLayout_cellGroup set overflow: visible;
3. go up until find the first div.fixedDataTableRowLayout_rowWrapper set z-index to 1 or any number greater than 0;

The first 2 style are in the .css. Unfortunately the last style in embedded in javascript.

Ideally, we would want to dynamically do the following.

On Select component mount 
    /** make modifications so that the select menu will show and lay over other rows **/
   1. go up and find the first div.fixedDataTableCellLayout_main set overflow:visible;
   2. go up and find the first div.fixedDataTableCellGroupLayout_cellGroup set overflow: visible;
   3. go up until find the first div.fixedDataTableRowLayout_rowWrapper set z-index to 1 or any number 
Before Select component unmount 
    /** make modifications so that the select menu will show and lay over other rows **/
   1. go up and find the first div.fixedDataTableCellLayout_main set overflow:hidden;
   2. go up and find the first div.fixedDataTableCellGroupLayout_cellGroup set overflow: hidden;
   3. go up until find the first div.fixedDataTableRowLayout_rowWrapper set z-index 0

I am really not sure if this can be done without forking the code and i really don't want to fork it for a tiny change like this. I understand that this was suppose to be a view only component however it was written in a way that seemed to be extendable to have editing features. I need some guidance as to how the solution can be approached. Finally thank you for writing the component.

[mpritchin]

I use react-select in cells.
It looks somethink like that:

import jQuery from 'jquery'
import FixedDataTable from 'fixed-data-table' 
import Select from 'react-select'

class ReactSelectCell {

...

  onOpen = () => {
      jQuery(this.refs.cell).closest('.fixedDataTableRowLayout_rowWrapper').css('z-index', 20);
  }

  onClose = () => {
     jQuery(this.refs.cell).closest('.fixedDataTableRowLayout_rowWrapper').css('z-index', 0);
  }

...

  render(){
    <FixedDataTable.Cell>
      <div ref="cell">
          <Select
            ...
            onOpen={this.onOpen}
            onClose={this.onClose}
          />
        </div>
    </FixedDataTable.Cell>
  }
}

Also need modify standard styles ( delete all 'overflow: hidden;'):

.fixedDataTableCellGroupLayout_cellGroup {
 ...
  /*overflow: hidden;*/
 ...
}

.fixedDataTableRowLayout_main {
...
  /*overflow: hidden;*/
...
}


.fixedDataTableCellLayout_main {
...
  /*overflow: hidden;*/
  ...
}

.fixedDataTableLayout_rowsContainer {
...
  /*overflow: hidden;*/
...
}

[naddeoa]

I've noticed that there is an overflowX and overflowY prop in the table api. Are these supposed to solve this issue?

[kaushikbarodiya]

I have implemented similar feature using tether-drop and portal api to open dropdown in a particular cell. Please refer this link http://github.hubspot.com/drop/ .

[SimonChris]

You can override inline styles with CSS. See https://css-tricks.com/override-inline-styles-with-css/.

[SimonChris]

If using React-Select, there is a solution at JedWatson/react-select#810, using the new React 16 Portals. You can probably do something similar with other dropdowns.

This way, you don't have to remove the 'overflow-hidden' styles, which causes some issues with the table layout.

import React from 'react'
import ReactDOM from 'react-dom'
import ReactSelect from 'react-select'

export default class Select extends ReactSelect {
    renderOuter(options, valueArray, focusedOption) {
        const dimensions = this.wrapper ? this.wrapper.getBoundingClientRect() : null
        const menu = super.renderMenu(options, valueArray, focusedOption)

        if (!menu || !dimensions) return null

        const maxHeight = document.body.offsetHeight - (dimensions.top + dimensions.height)
        return ReactDOM.createPortal(
            <div
                ref={ref => { this.menuContainer = ref }}
                className="Select-menu-outer"
                onClick={(e) => { e.stopPropagation() }}
                style={{
                    ...this.props.menuContainerStyle,
                    zIndex: 9999,
                    position: 'absolute',
                    width: dimensions.width,
                    top: dimensions.top + dimensions.height,
                    left: dimensions.left,
                    maxHeight: Math.min(maxHeight, 200),
                    overflow: 'hidden'
                }}
            >
                <div
                    ref={ref => { this.menu = ref }}
                    role="listbox"
                    tabIndex={-1}
                    className="Select-menu"
                    id={`${this._instancePrefix}-list`}
                    style={{
                        ...this.props.menuStyle,
                        maxHeight: Math.min(maxHeight, 200)
                    }}
                    onScroll={this.handleMenuScroll}
                    onMouseDown={this.handleMouseDownOnMenu}
                >
                    {menu}
                </div>
            </div>,
            document.body
        )
    }
}