Wijmo Menu unmount issues with React

Posted by: mauro on 24 June 2020, 6:59 am EST

  • Posted 24 June 2020, 6:59 am EST

    I have the following code:

    <wjcGrid.FlexGrid id='theGrid'
    ref={this.gridRef} className="has-ctx-menu"
    deferResizing={true} alternatingRowStep={0}
    headersVisibility="Column"
    formatItem={this.onFormatItem} itemsSource={this.state.view}
    initialized={this.initializeGrid}>
    <FlexGridFilter/>
    {this.state.headers.map(e => {
    return (
    <wjcGrid.FlexGridColumn key={e.raw} header={e.readable} binding={e.raw} width={'*'}
    isRequired={false}/>
    )
    })}
    </wjcGrid.FlexGrid>
    <wjInput.Menu contextMenuOf={['theGrid', this.gridRef]}
    header="Menu" selectedValuePath="cmd" dropDownCssClass="ctx-menu"
    itemClicked={this.menuItemClicked}>
    <wjInput.MenuItem cmd="menuSelectAll">
    Select All
    </wjInput.MenuItem>
    <wjInput.MenuItem cmd="menuInvertSelection">
    Invert Selection
    </wjInput.MenuItem>
    <wjInput.MenuSeparator/>
    <wjInput.MenuItem cmd="menuChangeSelected">
    Change Selected
    at: {this.flexGrid !== undefined && this.flexGrid.selectedRows.length >= 1 ? this.flexGrid.selectedRows[0].dataItem.id : null}
    </wjInput.MenuItem>
    <wjInput.MenuItem cmd="menuSelectChanged">
    Select All Changed
    </wjInput.MenuItem>
    <wjInput.MenuItem cmd="menuSelectOnlyChanged">
    Select Only Changed
    </wjInput.MenuItem>
    <wjInput.MenuSeparator/>
    <wjInput.MenuItem cmd="menuPrintSelected">
    Print Selected
    </wjInput.MenuItem>
    <wjInput.MenuSeparator/>
    <wjInput.MenuItem cmd="menuRead">
    Read
    </wjInput.MenuItem>
    <wjInput.MenuItem cmd="menuSend">
    Send
    </wjInput.MenuItem>
    <wjInput.MenuItem cmd="menuReadAllSet">
    Read All Set
    </wjInput.MenuItem>
    <wjInput.MenuItem cmd="menuSendAllSet">
    Send All Set
    </wjInput.MenuItem>
    <wjInput.MenuItem cmd="menuStop">
    Stop
    </wjInput.MenuItem>
    <wjInput.MenuItem cmd="menuExport">
    Export
    </wjInput.MenuItem>
    </wjInput.Menu>


    I have noticed a unusual error, every time I navigate to another page using I am presented with the following error:

    Warning: unmountComponentAtNode(): The node you're attempting to unmount was rendered by React and is not a top-level container. Instead, have the parent component update its state and rerender in order to remove this component.

    I noticed that if I remove the Menu portion of the code, this error no longer displays. Has anybody experienced the same error message using the Menu component?
  • Replied 24 June 2020, 4:20 pm EST

    Hi Mauro,

    We are sorry but we were unable to replicate the issue at our end. Please refer to the sample link below that we used to replicate the issue:

    https://stackblitz.com/edit/react-b9aa9m

    Can you please let us know whether we are missing something in order to replicate the issue? You could also modify the sample accordingly so that it reproduces the issue.

    Regards,
    Ashwin
  • Replied 25 June 2020, 3:44 am EST

    Hi Ashwin

    I have amended the code, you can see the error in the console when you swap between home and grid in the menu.

    https://stackblitz.com/edit/react-chn5rc

    https://react-chn5rc.stackblitz.io/

    react-chn5rc.zip

    thank you in advance for your help
    Kind regards,
    Mauro
  • Replied 25 June 2020, 7:39 pm EST

    Hello Mauro,

    Thank you for the updated sample. I have forwarded this issue to the developers for further investigation with internal tracking id 442713.

    I will update you once I will hear from them.

    ~regards
  • Replied 2 July 2020, 6:59 pm EST

    Hi Ashwin

    any update on how to resolve this issue?

    Kind regards,
    Mauro
  • Replied 2 July 2020, 8:47 pm EST

    Hi Mauro,

    This issue is fixed in the latest nightly build of Wijmo. You may verify the same using the sample link below:

    https://stackblitz.com/edit/react-qmwmfw

    PS: Nightly builds have not passed through the QA cycles as all of our release builds do. Therefore, we would not recommend you use it in production.

    ~regards
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels