Get an error after enabling insertRow.

[fscnick]

I get the following error after enabling 'insertRow' props.

Uncaught (in promise) Error: react-modal: You must set an element with `Modal.setAppElement(el)` to make this accessible
    at validateElement (ariaAppHider.js:31)
    at show (ariaAppHider.js:18)
    at Object.toggle (ariaAppHider.js:26)
    at Object.renderPortal (Modal.js:100)
    at Object.componentDidMount (Modal.js:66)
    at react-dom.js:4719
    at measureLifeCyclePerf (react-dom.js:4529)
    at react-dom.js:4718
    at CallbackQueue.notifyAll (react-dom.js:948)
    at ReactReconcileTransaction.close (react-dom.js:11398)

The table content shows correctly, but the pagination is malfunctional.
The snippet is below.

<BootstrapTable  data={ this.state.datas } pagination striped hover condensed insertRow={ true } options={this.options}>
		<TableHeaderColumn width='100' dataField='key'  isKey autoValue={true} hidden hiddenOnInsert>rID</TableHeaderColumn>
		<TableHeaderColumn width='150' dataField='date' editable={this.editable.date} dataSort>Date</TableHeaderColumn>
		<TableHeaderColumn width='100' dataField='kind' editable={this.editable.kind}>Kind</TableHeaderColumn>
		<TableHeaderColumn width='150' dataField='note' editable={this.editable.note}>Note</TableHeaderColumn>
		<TableHeaderColumn width='150' dataField='number' editable={this.editable.number} dataSort>number</TableHeaderColumn>
		<TableHeaderColumn width='150' dataField='picture' hidden hiddenOnInsert>Picture</TableHeaderColumn>
		<TableHeaderColumn width='100' dataField='tag' editable={this.editable.tag}>Tag</TableHeaderColumn>
		<TableHeaderColumn width='100' dataField='type' editable={this.editable.type}>Type</TableHeaderColumn>
</BootstrapTable>

this.editable = {
            date: {type: 'datetime'},
            kind: {type: 'select', options: {values: this.selections.kinds}},
            tag: {type: 'select', options: {values: this.selections.tags}},
			note: {validator: this.fieldNoteValidator},
			number: {validator: this.fieldNumberValidator},
			type: {validator: this.fieldTypeValidator}
        };

What do I miss ?

[AllenFang]

@fscnick, sorry for lately reply due to my long trip.

Could you help me to check the react-modal version in your env(node_module)? react-modal is one of a dependency in react-bootstrap-table

and I'll check this out also, thanks

[fscnick]

@AllenFang Don't be.

I'm not using nodejs for development. Get dependencies from CDN. react-modal is not included.
I have included it explicitly and got the same error. Is there other method to show the version on Chrome?

The following is the relative about react.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.2/react-redux.js"></script>

[AllenFang]

never mind for the react-modal version and I think this is an issue about react-modal, reactjs/react-modal#133 (comment) and reactjs/react-modal#267

did you have an examples on fiddlejs or a static html with js? I wanna check it, thanks

[fscnick]

Here is the example.

Start it by clicking Render. Then, RecordManager receives a new props. At the end of doPrepareData(), forceUpdate() is invoked where the error happens.

Although the code is slightly tedious, I hope this would give some help.

[AllenFang]

@fscnick, thanks, I roughly check your code but still got no idea about this issue. But I think there's no problem on react-bootstrap-table, I guess maybe is that you are not use node(npm) to develop and cause some wired problem, or maybe is about the redux. because redux application need render the Provider on DOM and according to the issue I mentioned before, this have a lots of chance for this issue.

I'll spend some time to try it again, but not sure I can find the root cause and I'm also busy here so ma have some delay..

Sorry

[fscnick]

No need to apologize. This a nice library.

I'm glad you are willing to take some time to do that. And hope it would not bother you too much.

I will try it, too.

[dminuoso]

I have tested this thoroughly and reproduced after a while using a very simplistic and trivial app. The issue stems from react-modal trying to attach to the DOM before it's loaded.

[AllenFang]

@dminuoso, thanks for your investigation, but what's kind of situation will get this error?

[dminuoso]

The problem happens whenever the library is loaded in a place without document available such as loading the library in a <head> node or server-side rendering.

There's a few workarounds such as calling Modal.setAppElement(elem) at least once from anywhere when document actually exists, such as any componentWillMount callback. But it's a hack with some drawbacks.

However I have a true fix for react-modal for which I will submit a PR later today.

[AllenFang]

got it, thanks you 👍 👍

[fscnick]

I see no PR about this. Is it applied?

[AllenFang]

@fscnick, please wait. and @dminuoso have you try to open PR or I can do it.

[fscnick]

Sorry for that. There is no response for a while.

I just wonder to know it is still processing or accepted. I am not sure if I get loss something or not.

[dminuoso]

This PR basically addresses this issue in a more flexible way.

reactjs/react-modal#360

This was the patch I had originally in mind:
dminuoso/react-modal@b283423

[AllenFang]

so this issue seems like fixed on react-model?

There's any change that I need to do in react-modal?

[dminuoso]

As it stands right now you will have to provide a getAppElement prop to <Modal /> in the upcoming version, such as <Modal getAppElement={() => document.body} />

[AllenFang]

@dminuoso, I'll have some investigation in near future and fix it, thanks a lots

[came]

After upgrading to react 16.2 I get exactly the same error. I've updated to "react-bootstrap-table": "^4.2.0". In my own coding I also use "react-modal": "^3.1.7"

[AllenFang]

@came sorry for lately reply, v4.3.0 have newest dependency on [email protected], you can check this.