[EuiSelectable] Missing or partial documentation and types

[dej611]

I've recently implemented a component with EuiSelectable (within a popover - see elastic/kibana#91844) in Lens and want to share some feedback on the documentation. Hope this is helpful.

• The onChange signature (EuiSelectableSearchProps) of the searchProps is slightly different compared to the one in EuiFieldSearch:
  • Intellisense is showing the different signature, but it's not super clear the options array content (you can guess it's only the matching array, but it would be useful to have it documented)
  • Because of this change it is not possible to control the searchTerm value from the outside. If passed it basically makes the component unusable for search
• The onChange description for the EuiSelectable type is partial:

  Passes back the altered options array with selected options as

• For some reason the "full" value for the height prop in the EuiSelectable seems to not work if the table is within a EuiPopover. I can only see the search field, but no list 🤔 .

As for testing, because of the internal AutoSizer used for the virtualization, the EuiSelectable list is not rendered at all - apparently on 0 dimensions is not even calling the children props, rather avoid any work.
So I came up with this trick in Jest to have the list rendered:

// Mock the AutoSizer inside EuiSelectable and return some dimensions > 0
jest.mock('react-virtualized-auto-sizer', () => {
  return function (props: {
    children: (dimensions: { width: number; height: number }) => React.ReactNode;
  }) {
    const { children, ...otherProps } = props;
    return <div {...otherProps}>{children({ width: 100, height: 100 })}</div>;
  };
});

Not super clean but in case somebody needs it in the future it's here.

[cchaos]

For some reason the "full" value for the height prop in the EuiSelectable seems to not work if the table is within a EuiPopover. I can only see the search field, but no list 🤔 .

That's because EuiPopover's don't have an intrinsic height. The height is created by the content. Using full just sets the height to 100% meant to fill something like a flex-box with grow. (See Flyout example). In a popover, you will have to give the list an explicit height in pixels.

[dej611]

Yes, that was the solution I ended up using 👍