@element-public/react-select v1.0.0

Select

Description

Select provides a single-option select menu.

See live demos on storybook

Storybook Select Demos

Install bundle from npm-e

npm i @element-public/react-components @element-public/themes

Optional: install the component individually

npm i @element-public/react-select @element-public/themes

Open ~/.npmrc in an editor and add the following line to enable the @element-public scope:

@element-public:registry=https://npm.platforms.engineering

Troubleshooting

See below if you have never installed a package from Bayer's npm-enterprise or run into the following error:

npm ERR! code E401
npm ERR! Unable to authenticate, your authentication token seems to be invalid.
npm ERR! To correct this please trying logging in again with:
npm ERR!     npm login

Setup an access token

See the devtools npm-e guide to learn how to create an access token if this is the first time you are using a npm-e package at Bayer or you do not have a line that starts with the following in your ~/.npmrc file:

//npm.platforms.engineering/:_authToken=

Notes

There are two categories of the Select component, Select and Multi-Select. Select allows a user to choose one option from a list and Multi-Select allows a user to choose one or more options from a list.

Notable props for the Select component include clearable, which adds an Icon Button that allows users to clear their choice(s) in Select, and showSelectAll, which shows an option for the user to select all options from a list. Another important prop is requireConfirmation which is used with Multi-Select, requires a confirmation before the onChange will be called, and is required for the cancelLabel and confirmLabel props to be used.

Additionally, several combinations of styles and features exist for Select.

The Filled style of Select shows a textbox with a light gray background color behind the text, whereas the Outlined style of Select shows a textbox with no added background color but a solid line around it.

The Autocomplete feature fills in an option from the list based on characters input by the user and can be used with either style of Select.

Usage

The Select component can be used within many other components, like Menu, Card, and Modal, and is most commonly used in forms. Select can also include smaller components like Icons, as shown in the 'Options with Leading Icon' story.

Option Schema Examples

export const simpleArray = ['Cat', 'Dog', 'Ferret'];

export const options = [
    { displayName: 'Grains', value: 'grains' },
    { displayName: 'Vegetables', value: 'vegetables' },
    { displayName: 'Fruit', value: 'fruit' }
];

export const foodSchema = [
    {
        groupName: 'Carbs',
        id: 'carbs',
        options: [
            { text: 'Fries', value: 'fries' },
            { text: 'Bread', value: 'bread' }
        ]
    },
    {
        groupName: 'Dairy',
        id: 'dairy',
        options: [
            { text: 'Milk', value: 'milk' },
            { text: 'Cheese', value: 'cheese' }
        ]
    }
];

export const groupSchema = [
    {
        groupName: 'Chevy',
        id: 'chevy',
        options: [
            { text: 'Malibu', value: 'malibu' },
            { text: 'Suburban', value: 'suburban' }
        ]
    },
    {
        groupName: 'Ford',
        id: 'ford',
        options: [
            { text: 'Focus', value: 'focus' },
            {
                text: 'F-150',
                value: 'f150'
            }
        ]
    }
];

    const nestedOptions = [
        {
            id: 'cars',
            options: [
                {
                    groupName: 'Chevy',
                    id: 'chevy',
                    options: [
                        {
                            text: 'Malibu',
                            value: 'malibu'
                        },
                        {
                            text: 'Suburban',
                            value: 'suburban'
                        }
                    ]
                },
                {
                    groupName: 'Ford',
                    id: 'ford',
                    options: [
                        {
                            text: 'Focus',
                            value: 'focus'
                        },
                        {
                            text: 'F-150',
                            value: 'f150'
                        }
                    ]
                }
            ]
        }
        {
            id: 'food',
            options: [
                {
                    groupName: 'Carbs',
                    id: 'carbs',
                    options: [
                        {
                            text: 'Fries',
                            value: 'fries'
                        },
                        {
                            text: 'Bread',
                            value: 'bread'
                        }
                    ]
                },
                {
                    groupName: 'Dairy',
                    id: 'dairy',
                    options: [
                        {
                            text: 'Milk',
                            value: 'milk'
                        },
                        {
                            text: 'Cheese',
                            value: 'cheese'
                        }
                    ]
                }
            ]
        }
    ];

Testing

When unit testing the Select - unlike previous versions the menu is not rendered until visible. If you are testing for specific menu options, use defaultOpen so that the menu will be rendered and testable.

Select Props

Select Deprecated Props

Select Render Props

Select Events

Select Breaking Changes

Select Clear Indicator Props

Select Confirmation Props

Select Confirmation Events

Select Content Props

Select Content Render Props

Select Control Component Props

Select Control Component Render Props

Select Indicators Container Render Props

Select Label Props

Select Label Render Props

Select Menu Props

Select Menu Render Props

Select Menu List Props

Select Menu List Render Props

Select Multi Value Render Props

Select Multi Value Label Render Props

Select Option Props

Select Option Deprecated Props

Select Option Render Props

Select Option Filter Props

Select Portal Props

Select Portal Render Props

Select Value Container Props

Select Value Container Render Props