React.js Blueprint Select2 Disabling

Last Updated : 16 Oct, 2022

Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.

In this article, we’ll discuss the React.js Blueprint Select2 Disabling. Select2 component displays a list of items to choose one item and item children are wrapped in a MenuItem that contains the list and an optional InputGroup to filter the items. The Select2 component and its children can be disabled.

React.js BluePrint Select2 Props:

activeItem: It denotes the currently active item that is used for keyboard interactions.
children: It denotes the element which triggers the select popover.
className: It denotes a list of class names to pass along to a child element.
createNewItemFromQuery: It allows the creation of new items from the current query string provided.
createNewItemPosition: It denotes the createNewItem position within the list, either first or last.
createNewItemRenderer: It helps in creating a selectable Create Item option from the current query string.
disabled: It specifies whether the component will be disabled or interactive.
fill: It determines whether the component should take up the full width of its container.
filterable: It determines whether the dropdown list can be filtered.
initialContent: It denotes the default React component that renders when the query string is empty.
inputProps: It denotes the props that are used to spread to the query InputGroup.
itemDisabled: It determines whether the given item is disabled.
itemListPredicate: It is used to customize the querying of entire items array, passed as props.
itemListRenderer: It is used to custom render the contents of the dropdown.
itemPredicate: It is used to customize the querying of individual items of the items array.
itemRenderer: It is used to custom render an item in the dropdown list.
items: It denotes the array of items in the list.
itemsEqual: It is used in determining whether the two items are equal.
menuProps: It denotes the props that are used to spread to the Menu listbox containing the selectable options.
noResults: It is used to render a React component when the filtering returns zero results.
onActiveItemChange: It is a callback function that gets Invoked when user interaction changes the active item.
onItemSelect: It is a callback function that gets invoked when an item from the list gets selected, typically by clicking or pressing the enter key.
onItemsPaste: It is a callback function that gets invoked when multiple items get selected at once.
onQueryChange: It is a callback function that gets invoked when the query string is changed.
popoverContentProps: It denotes the props that are used to spread to the Popover2 content wrapper element.
popoverProps: It denotes the props to spread to Popover.
popoverRef: It denotes the optional ref for the Popover2 instance.
popoverTargetProps: It denotes the props that are used to add to the popover target wrapper element.
query: It denotes the query string passed to itemListPredicate or itemPredicate to filter items.
resetOnClose: It determines whether the active item should be reset to the first matching item when the popover closes.
resetOnQuery: It determines whether the active item should reset to the first matching item every time the query changes.
resetOnSelect: It determines whether the active item should be reset to the first matching item when an item is selected.
scrollToActiveItem: It determines whether the active item should always be scrolled into view when the prop changes.

Syntax:

<Select2
    disabled={true}
    ...
>
    <Button disabled={true}>
</Select2>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npm create-react-app appname

Step 2: After creating your project folder i.e. appname, move to it using the following command:

cd appname

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @blueprintjs/core

Project Structure:

Step 4: Run the project as follows:

npm start

Example 1: The below example demonstrates the usage of disabling of Select2 component.

Javascript

import React, { useState } from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import { Button, MenuItem } from "@blueprintjs/core"; 
import { Select2 } from "@blueprintjs/select"; 
import "@blueprintjs/select/lib/css/blueprint-select.css"; 
  
function App() { 
    const [item, setItem] = useState("Select"); 
    return ( 
        <center> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>ReactJs Blueprint Select2 Disabling</h2> 
            </div> 
            <Select2 
                disabled={true} 
                items={[ 
                    "Data Structures", 
                    "Algorithms", 
                    "Programming Language", 
                    "DevOps", 
                ]} 
                itemRenderer={(val, itemProps) => { 
                    return ( 
                        <MenuItem 
                            key={val} 
                            text={val} 
                            onClick={(elm) => { 
                                setItem(elm.target.textContent); 
                            }} 
                        /> 
                    ); 
                }} 
                onItemSelect={() => { }} 
            > 
                <Button text={item} /> 
            </Select2> 
        </center> 
    ); 
} 
  
export default App;

Output:

Example 2: The below example demonstrates the usage of disabling of Select2 component and its children button.

Javascript

import React, { useState } from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import { Button, MenuItem } from "@blueprintjs/core"; 
import { Select2 } from "@blueprintjs/select"; 
import "@blueprintjs/select/lib/css/blueprint-select.css"; 
  
function App() { 
    const [item, setItem] = useState("Select"); 
    return ( 
        <center> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>ReactJs Blueprint Select2 Disabling</h2> 
            </div> 
            <Select2 
                items={[ 
                    "Data Structures", 
                    "Algorithms", 
                    "Programming Language", 
                    "DevOps", 
                ]} 
                itemRenderer={(val, itemProps) => { 
                    return ( 
                        <MenuItem 
                            key={val} 
                            text={val} 
                            onClick={(elm) => { 
                                setItem(elm.target.textContent); 
                            }} 
                        /> 
                    ); 
                }} 
                onItemSelect={() => { }} 
            > 
                <Button text={item} disabled={true} /> 
            </Select2> 
        </center> 
    ); 
} 
  
export default App;