Dropdown

import { Dropdown } from 'cx/widgets';

The Dropdown widget is commonly used in lookup fields, date fields, and menus, but it can also be used independently.

<Button
    onClick={(e, {store}) => {
        store.toggle("$page.showDropdown")
    }}
>
    Toggle Dropdown
</Button>

<Dropdown
    visible-bind="$page.showDropdown"
    arrow
    offset={10}
    placementOrder="down-right up-right"
    style="padding: 20px;"
    zIndex={1000}
>
    Dropdown placed next to the previous sibling (button).
</Dropdown>

<Button
    onClick={(e, {store}) => {
        store.toggle("$page.showParentDropdown")
    }}
>
    Toggle Parent Dropdown
</Button>

<Dropdown
    visible-bind="$page.showParentDropdown"
    arrow
    offset={10}
    placement="up"
    onResolveRelatedElement={el => el.parentElement}
    style="padding: 20px; max-width: 300px"
    zIndex={1000}
>
    Dropdown placed next to the element returned by the onResolveRelatedElement target.
</Dropdown>

<TextField value-bind="$page.query" focused-bind="$page.showSuggestions" trackFocus icon="search" inputAttrs={{autoComplete: "off"}}/>

<Dropdown
    visible-bind="$page.showSuggestions"
    offset={1}
    placementOrder="down-right up-right"
    style="padding: 20px;"
    zIndex={1000}
    matchWidth
>
    Display search results here.
</Dropdown>

Copied!Cx Fiddle

Positioning of the dropdown is controlled by the relatedElement and the placement property. Default relatedElement is the element rendered prior to the dropdown. If neccessary, use the onResolveRelatedElement callback to find the proper element. Placement direction is determined by the available space on the screen and controlled by the placement and placementOrders props.

Configuration

Property	Description	Type
closeOnEscape	Set to `true` to make the window automatically close if the Esc key is pressed on the keyboard. Default value is `false`.	boolean
placement	Defines where the dropdown will be placed. Supported values are `top`, `right`, `bottom` and `left`, but also corner options if specified in the `placementOrder`.	string
relatedElement	DOM element used as an anchor for determining dropdown's position.	DOM Element
autoFocus	Set to `true` to automatically focus the dropdown when it's shown.	boolean
autoFocusFirstChild	Set to `true` to automatically find and focus the first chinld in the dropdown when it's shown.	boolean
baseClass	Base CSS class. Default is `dropdown`.	string
centerX	Set to `true` to initially place the overlay in the center of the page horizontally.	boolean
centerY	Set to `true` to initially place the overlay in the center of the page vertically.	boolean
class className	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
closeOnScrollDistance	The dropdown will be automatically closed if the page is scrolled a certain distance. Default value is `50`.	number
containerStyle	Style to be applied to the overlay's container element.	string
destroyDelay	Number of milliseconds to wait, before removing the element from the DOM. Used in combination with the `animate` property.	number
dismissOnFocusOut	Set to `true` to dismiss the overlay when it loses focus.	boolean
dismissOnPopState	Set to `true` to dismiss the window if the user presses the back button in the browser.	boolean
focusable	Set to true to make the top level overlay element focusable.	boolean
items children	List of child elements.	array
layout	Define an inner layout.	string/object
matchMaxWidth	Constrains the component's width to the maximum width of its parent, maintaining a responsive design within limits.	boolean
matchWidth	Ensures the component matches the width of its parent container, creating a cohesive layout.	boolean
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
onMove	A callback function which fires while the overlay is being moved around.	function
onResize	A callback function which fires while the overlay is being resized.	function
placementOrder	Defines available placement options. The dropdown will be pick the placement to maximize content visibility. Supported options are `top`, `right`, `down` and `left` and corner values `up-left`, `up-right`, `down-left`, `down-right`, `right-down`, `right-up`, `left-up`, `left-down`. Default value is `"up down right left"`.	string
plainText	Set to `true` to avoid converting inner strings to templates. Default is `false`.	boolean
preserveWhitespace ws	Keep whitespace in text based children. Default is `false`. See also `trimWhitespace`.	boolean
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
resizeWidth	resizeWidth	number
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object
trimWhitespace	Remove all whitespace in text based children. Default is `true`. See also `preserveWhitespace`.	boolean
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean
zIndex	zIndex	number

Documentation