Carbon: Using a MultiSelect in a TableToolbar

[nunomaia]

What package(s) are you using?

• [ ] carbon-components
• [X] carbon-components-react

Summary

Using a MultiSelect in a TableToolbar don't show items.

Relevant information

When a MultiSelect component is added to a TableToolbar, items of MultiSelect aren't displayed properly. There is any property to overcome this ?

````javascript

    <TableContainer
      title="Sample Tile"
      description="Sample description">

      <TableToolbar>
        <TableToolbarContent>
          <TableToolbarSearch />
          <ToolbarItem>
            <MultiSelect id="carbon-multiselect-example" 
              useTitleInItem={false} 
              label="MultiSelect Label" 
              invalid={false} 
              invalidText="Invalid Selection" 
              items={[
                {id: 'table-filter-0',text: 'Successful', label :"Successful"},
                {id: 'table-filter-1',text: 'Aborted On Error', label :"Aborted On Error"},
              ]} />  
            </ToolbarItem>
        </TableToolbarContent>
      </TableToolbar>`

[asudoh]

Hi 👋 would you want to adjust z-index of the dropdown body?

[nunomaia]

Yes, even if I increase the value on z-index it has no effect

[emyarod]

can you create a Code Sandbox illustrating this issue? https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

[nunomaia]

Sure,

https://yoi2b.codesandbox.io/

[emyarod]

@asudoh seems this is caused by clip-path, after removing that rule and increasing the z-index the issue appears resolved. from what I can tell it does not affect the toolbar animations, but want to double check on that with you

@nunomaia for now I believe you can add these rules as a workaround:

https://codesandbox.io/s/codesandbox-km93k

.bx--toolbar-content {
  clip-path: none;
  z-index: 1; /* some nonzero z-index value */
}

[asudoh]

Uh clip-path is for the animation of batch action selection... My apologies for that, need to look to see how both features can be achieved.