React-Bootstrap Dropdowns AutoClose

React-Bootstrap Dropdown Autoclose is a feature that allows you to manage how dropdown menus automatically close. By default, when a menu item is selected or when a user clicks outside the dropdown, it closes.

React-Bootstrap Dropdowns AutoClose Autoclose attributes:

• true: By using this property the dropdown is closed when the user clicks on a dropdown item or outside the dropdown.
• false: By using this property the dropdown must be manually closed by clicking on the toggle button.
• inside: By using this property the dropdown is closed only when a dropdown item is clicked.
• outside: By using this property the dropdown is closed only when the region outside the dropdown is clicked.

Syntax:

<Dropdown autoClose="value">
        <Dropdown.Toggle>
          Title
        </Dropdown.Toggle>
</Dropdown>

Example 1: In this example, we will learn about autoClose true and false options.

Javascript

import { Dropdown } from 'react-bootstrap';

const App = () => {
    return (
        <div className="App">
            <h1 style=
                    {{ color: 'green', textAlign: 'center' }}>
                GeeksforGeeks</h1>
            <h5 style=
                    {{ textAlign: 'center' }}>
                React-Bootstrap Dropdowns AutoClose</h5>
            <div style={{ textAlign: 'center' }}>
                <Dropdown className="my-2" autoClose={true}>
                    <Dropdown.Toggle variant="dark" >
                            Courses(autoClose = True)
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                        <Dropdown.Item>
                            Data Structures and Algorithms
                        </Dropdown.Item>
                        <Dropdown.Item>
                            Java Backend
                        </Dropdown.Item>
                        <Dropdown.Item>
                            Frontend Engineer
                        </Dropdown.Item>
                        <Dropdown.Item>
                            Backend Engineer
                        </Dropdown.Item>
                    </Dropdown.Menu>
                </Dropdown>
                <Dropdown className="my-2" autoClose={false}>
                    <Dropdown.Toggle variant="dark">
                        Courses(autoClose = False)
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                        <Dropdown.Item>
                            Data Structures and Algorithms
                        </Dropdown.Item>
                        <Dropdown.Item>
                            Java Backend
                        </Dropdown.Item>
                        <Dropdown.Item>
                            Frontend Engineer
                        </Dropdown.Item>
                        <Dropdown.Item>
                            Backend Engineer
                        </Dropdown.Item>
                    </Dropdown.Menu>
                </Dropdown>
            </div>
        </div>
    );
};

export default App;

Output:

Example 2: In this example, we will learn about autoClose inside and outside options.

Javascript

import { Dropdown } from 'react-bootstrap';

const App = () => {
    return (
        <div className="App">
            <h1 style=
                    {{ color: 'green', textAlign: 'center' }}>
                GeeksforGeeks</h1>
            <h5 style=
                    {{ textAlign: 'center' }}>
                React-Bootstrap Dropdowns AutoClose
            </h5>
            <div style={{ textAlign: 'center' }}>
                <Dropdown className="my-4" autoClose='inside'>
                    <Dropdown.Toggle variant="dark" >
                            Courses(autoClose = Inside)
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                        <Dropdown.Item>
                            Data Structures and Algorithms
                        </Dropdown.Item>
                        <Dropdown.Item>
                            Java Backend</Dropdown.Item>
                        <Dropdown.Item>
                            Frontend Engineer</Dropdown.Item>
                        <Dropdown.Item>
                            Backend Engineer</Dropdown.Item>
                    </Dropdown.Menu>
                </Dropdown>
                <Dropdown className="my-4" autoClose='outside'>
                    <Dropdown.Toggle variant="dark">
                            Courses(autoClose = Outside)
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                        <Dropdown.Item>
                            Data Structures and Algorithms
                        </Dropdown.Item>
                        <Dropdown.Item>
                            Java Backend</Dropdown.Item>
                        <Dropdown.Item>
                            Frontend Engineer</Dropdown.Item>
                        <Dropdown.Item>
                            Backend Engineer</Dropdown.Item>
                    </Dropdown.Menu>
                </Dropdown>
            </div>
        </div>
    );
};

export default App;

Output: