ContextMenuPanel not updating when it should

[stacey-gammon]

Using a form in panel.content doesn't update because shouldComponentUpdate returns false, even when content in the panel changes.

Need to dig further into this because a parents component not updating shouldn't reflect the child content from re-rendering, but when I forced this function to return true, everything worked. This is regarding elastic/kibana#17621, in which when I switched to the EUI version, the input text box doesn't work right. Worked fine with the kui version.

[jen-huang]

@stacey-gammon As part of #584 (relevant discussion), I added the prop watchedItemProps, which specifies what properties of items the component should check for changes as part of shouldComponentUpdate(). Maybe this is something that can help?

Example usage:

        <EuiContextMenuPanel
          style={{ minWidth: 200 }}
          items={items && items.length ? items.map(item => {
            return (
              <EuiTableSortMobileItem
                key={item.key}
                onSort={item.onSort}
                isSorted={item.isSorted}
                isSortAscending={item.isSortAscending}
              >
                {item.name}
              </EuiTableSortMobileItem>
            );
          }) : null}
          watchedItemProps={['isSorted', 'isSortAscending']}
        />

[stacey-gammon]

Awesome, thanks @jen-huang I think that will work, will check it out!

[chandlerprall]

EuiContextMenu's panels prop takes either an items array or a content element. Any items are mapped to EuiContextMenuPanel's items and any content is passed as the panel's child. The shouldComponentUpdate method only takes items into account and ignores that content may exist. This should be changed to run the existing shouldComponentUpdate code around items only if items array was passed; if content was provided instead the method should return true and assume the content child will itself manage it's re-rendering lifecycle if performance is a concern/issue.