react-autosuggest problems as 'in-place' editor in a react-bootstrap-table

[neophobia]

I'm trying to use react-autosuggest as an 'in-place' editor to edit cell values in a 'react-bootstrap-table' but having trouble to get it to work as expected. Clicking in the cell, the autosuggest input appears in the cell showing the placeholder text. When starting to type, the suggest list seems to appear with the 'filtered-down' content, but is clipped at the cell border, apparently. I created a pen to illustrate the behaviour:

http://codepen.io/neophob/pen/bggVBQ

Is there a possibility to get this working and the 'drop-down' to appear above the table-contents?

Thanks & greetings, Bernd Rode

[NiranjanShah]

Can you please let us know the solution for the above scenerio

[SimonChris]

In React 16, you can now do this using Portals:

<div ref={this.container}>
        <Autosuggest
          ...
          renderSuggestionsContainer={({ containerProps , children }) => {
            if(!this.container.current) {
              return null;
            }
            let rect = this.container.current.getBoundingClientRect();
            let { style } = containerProps;
            style = { 
              ...style, 
              position: 'fixed',
              top: rect.top + 35, 
              left: rect.left, 
              zIndex: 1000, 
            }
            return (
              ReactDom.createPortal(
                <div {... containerProps}
                  style={style}>
                  {children}
                </div>, document.body) 
            )
          }}
        />
</div>