How to fix ‘ a ButtonGroup component inside every <List> items

Question

i'm setting up a component with an expand option and i want to add a ButtonGroup with listed options inside every list item.

const StackList = (props, permissions) => (
    <Card >
        <List {...props}   pagination={false} title={<AppTitle />}>
            <Datagrid rowClick="expand" expand={<StackShow {...props}  />} >
                <TextField source='name' />
                <TextField source='status' />
                <ReferenceField source='environment' label='Environment' reference='environments' allowEmpty>
                    <ChipField source='name' />
                </ReferenceField>
                <ReferenceArrayField source="hosts" label="Hosts" reference="hosts">
                    <SingleFieldList>
                        <ChipField source="name" />
                    </SingleFieldList>
                </ReferenceArrayField>
                {permissions !== 'account-admin' &&<EditButton />}
                {permissions === 'account-admin' &&<DeleteButton />}
                <SplitButton {...props}  />
            </Datagrid>
        </List>
    </Card >
);

const enhance = compose(
    withStyles(classes),
);

export default enhance(StackList);

Answer 1

In your SplitButton component onClick handler, you should call event.stopPropagation() and it won't bubble up to the expand handler