react-bootstrap How Do You Split A Dropdown.Item?

Question

I am using react-bootstrap to create a dropdown menu using the Dropdown component.

Although I can get the dropdown to easily work, I want to further split one of the options to be a Split button.

Here is the working code before I attempt to split anything...

<DropdownButton 
    variant="light" 
    title={ <><MdFilterListAlt />&nbsp;&nbsp;<span className="text-muted">Filters</span></> }
    >
    <Dropdown.Item eventKey="1">My Invoices</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item eventKey="2">Draft</Dropdown.Item>
    <Dropdown.Item eventKey="3">Posted</Dropdown.Item>
    <Dropdown.Item eventKey="4">Cancelled</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item eventKey="5">To Check</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item eventKey="6">Unpaid</Dropdown.Item>
    <Dropdown.Item eventKey="7">Paid</Dropdown.Item>
    <Dropdown.Item eventKey="8">Overdue</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item eventKey="9">Invoice Date</Dropdown.Item>
    <Dropdown.Item eventKey="10">Due Date</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item eventKey="11">Add Custom Filter</Dropdown.Item>
</DropdownButton>

Here is my code (not working but I am trying to illustrate the concept better ):

<DropdownButton 
    variant="light" 
    title={ <><MdFilterListAlt />&nbsp;&nbsp;<span className="text-muted">Filters</span></> }
    >
    <Dropdown.Item eventKey="1">My Invoices</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item eventKey="2">Draft</Dropdown.Item>
    <Dropdown.Item eventKey="3">Posted</Dropdown.Item>
    <Dropdown.Item eventKey="4">Cancelled</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item eventKey="5">To Check</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item eventKey="6">Unpaid</Dropdown.Item>
    <Dropdown.Item eventKey="7">Paid</Dropdown.Item>
    <Dropdown.Item eventKey="8">Overdue</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item eventKey="9" as={ ButtonGroup }>
        <Dropdown>
            <Button variant="light">Invoice Date</Button>
            <Dropdown.Toggle split variant="light" id="dropdown-split-basic" />
            <Dropdown.Menu>
                <Dropdown.Item eventKey="12">Action</Dropdown.Item>
                <Dropdown.Item eventKey="13">Another action</Dropdown.Item>
                <Dropdown.Item eventKey="14">Something else here</Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
    </Dropdown.Item>
    <Dropdown.Item eventKey="10">Due Date</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item eventKey="11">Add Custom Filter</Dropdown.Item>
</DropdownButton>`

I have looked through the documentation on split button dropdowns but there is no example of a Dropdown.Item being converted into this but I need this in my use case.

Is there any way to do this?

Answer 1

Your example is working. It's just by default dropdown menu is closed when you click inside. You can change this behaviour by adjusting the property autoClose. In my example I set it to false:

https://codesandbox.io/s/flamboyant-taussig-6nqj1k

• Manage the desired visibility behaviour with show, onToggle and onSelect.
• Style as needed