Using a MultiSelect in a TableToolbar

What package(s) are you using?

• carbon-components
• 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 ?

        <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]

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.

[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 */
}