Editable dropdown

Actions to render in the footer of the dropdown.

Whether or not the input can be activated. Text will not be selectable and a cursor: pointer will be used.

Set to true to disable the ability to fully clear the text box value

Set to true to allow selecting values that aren't in the list of items.

Set to true to allow users to highlight currently selected item (selected text will be passed as text box value instead of placeholder)

If the callout is being positioned relative to an existing element in the DOM the relative element should be supplied as the anchorElement. (anchorOrigin should be supplied with anchorElement)

anchorOffset is used to shift the location of the callout from the defined location by a fixed amount. An example might be the tooltip callout defaults to an anchorOffset of { x: 8 y: 8 } from the mouse position.

When an anchorElement is supplied the anchorOrigin is used to describe the relative location of the callout with respect to the anchorElement. A common example here is a dropdown button aligns the callout to the bottom-right of the button.

Instead of using an anchorElement to position the callout, if can be positioned based on a fixed location. The anchorPoint defines the fixed position for the anchor.

aria-activedescendant on the input/textfield.

aria-autocomplete on the input/textfield.

aria-controls on the input/textfield.

Adds aria-describedby to the Expandable element.

aria-expanded on the input/textfield.

aria-hasPopup on the input/textfield.

aria-invalid on the input/textfield.

Adds aria-label to the Expandable element.

Adds aria-labelled-by to the Expandable element.

aria-roledescription on the input/textfield.

When true (the default) any entered text (in freeform mode) is accepted on blur or escape. If false, the user must explicitly press the enter key to accept a freeform value.

Adjust the textfield height as the contents change.

Should the input tag have autocomplete enabled. Ignored if multiline is set to true.

autoFocus on the input/textfield.

Supply autoSelect to select all the text in the input when the textfield gets focus. This is useful if you want the user to copy the text, or replace the text upon typing instead of changing the current value.

This will dismiss the callout once it gets and then loses focus. Callouts should dismiss when they lose focus unless they are intended to be modeless UI.

ClassName to pass to the callout content. Use this to override the width.

ClassName to pass to the Expandable.

Optional tree columns if showTree is passed

className to pass to the listbox's container.

Ref to pass to the expandable's container element.

This needs to be supplied for a window relative layout. Otherwise the anchorElement is used as the location basis.

Set to true to make the expandable disabled.

Optional Id that should be used on the dropdown to uniquely identify this element.

Location on the dropdown to make relative to the button location.

Whether or not textField is editable and should be treated like a combobox.

A custom way to force single-select options in a multi-select selection.

Set to true if you don't want focus managed by a FocusZone.

The element should not be tabable but still should be able to receieve focus.

The key used to expand the components callout.

A ref to forward to the expandable.

Set to false to not do any text filtering when the user types in the filter box. Do this if you want to control filtering through userFilteredItems.

Optional method to perform a custom filter of items based on filter text. If not provided, it will filter items based on item.text.

Custom function to filter items based on the given filter text @param filterText The text to filter the items by

Custom function which determines if a given item should be focused after filtering

Text to show as a placeholder in the filter box.

The throttle wait time to use when updating the filter. The text field will still update on every keystroke, but the updating the filter itself will be throttled by this amount. The default value is 0 ms. Passing a value of 0 here will cause this text field not to be throttled.

Text to display when there are no filter results. Will be formatted with the current filter string.

Indicates how we should apply the focus treatment to the TextField. Default is to show the focus treatment when focused via keyboard or mouse. TextFields that do not wish to have focus treatment (e.g. in the filter bar) should use "none"

This is called when updates are made to the listBox items to update the unselectbale items in the selection.

If hideDropdownIcon is supplied the button acts as a dropdown button without showing the dropdown arrows.

Classname passed to the input/textarea element.

ref to get passed to the input element.

Id to be applied to the expandable's input element.

Type that is passed to the <input> element, e.g. password, number, etc. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types for a full list

Items should be supplied as an ObservableArray if they will be changing.

Label to be rendered before the TextField. Will be wrapped in a <label> element and wired up with the appropriate aria attributes.

The callout element will trap mouse events and dismiss the callout when a click occurs. This will prevent the events from being handled by the underlying elements outside the callout's contents.

Set to true or false to trigger screen reader loading announcements. To show a loading indicator, pass an item of type ListBoxItemType.Loading in items.

MaxLength on the input/textarea.

The maximum width in px that the textfield will grow to.

Provide a minimum width for the callout

If true, uses a textarea instead of an input element.

Text to show when there are no items in the listbox.

Called when blur event is fired by the input/textarea.

Called when the value of the input/textarea changes.

Called when the element is clicked.

Optional callback to call when the dropdown is collapsed.

Method that is called when the callout is dismissed.

Optional callback to call when the dropdown is expanded.

A callback to notify when the filter text has changed. Do custom searching here and update the items.

Called when the focus event is fired by the input/textarea.

Called when the key down event is fired by the input/textarea.

Called when the key press event is fired by the input/textarea.

Called when the key press event is fired by the input/textarea.

Called when the paste event is fired by the input/textarea.

onSelect is called when the row is selected. Selection occurs on the Space keystroke or click. @param event - This is the event that is causing the selection. @param item - Details about the list row being selected.

Called when the value of the input changes.

onToggle is called when an item is either expanded or collapsed. This will only do anything if the list box is being displayed as a tree. @param event - This is the event that is causing the toggle. @param treeItem - Details about the list item being toggled.

Called when a new value is selected. Selection happens on click, enter, or tab, or when the dropdown closes if allowFreeform is true.

Text to show within the DropdownExpandable when there is no selected value.

The portalProps allow the caller to control how the Callout's portal are configured. The default will create the portal as a full screen element rooted in the body.

Props for the icon to be rendered before the input/textarea.

If the TextField should be read-only.

Custom content to render before the listbox in the dropdown.

Function which returns the callout for this dropdpown.

Function which returns the Expandable for this dropdown.

If provided, this will be called on each item to determine how it's rendered.

Renderer for selected items.

Indicates whether dropdown is required or not.

If the text area should be resizable. Only used if multiline is true.

Optional aria role

Number of rows the text area should have. Only used if multiline is set to true.

String to show when a search is in progress.

Set to true to show a searching indicator in place of the list and make a screenreader announcement. Set to null to cancel a search without making an announcement.

The selected text is shown in the input with a placeholder-like behavior. It will default to the text of the selected item in items.

The selection maintains the selected state and defines the selection behavior of the list box. Defaults to a ListSelection with selectOnFocus set to false if not provided. Selection should be specified on mount and not updated to a new object during the Listbox's lifecycle.

If the character counter against the limit in the lower right corner should be displayed. Only used if maxLength is provided.

Set to true to show any current items while searching for more.

If the list item has an icon show the icon as the prefix icon in the text field.

Whether or not to display items as a tree rather than a list ListBox will construct a tree using the parent field of ListBoxItems

When true or false, overrides the default spellCheck behavior of the browser.

Changes visual appearance of TextField. Use TextFieldStyle.inline to style as an inline text field.

Props for the icon to be rendered after the input/textarea.

Sets the tabindex on the input/textarea element.

The text value passed to the ExpandableTextField.

Tooltip to show when the button is hovered.

Provide if you want to show a custom set of filtered items. The items will still be filtered by text in the filterbox unless filterByText is false.

Provides the original item index for each item in userFilteredItems. Optional, if not provided then this will be computed by traversing items for match indices, which can be slow if there are a lot of items.

Text value of the input/textarea. This prop is 100% controlled by the consumer. onChange must also be implemented in order to work properly. If this value is a raw string, the prop must be updated to cause the TextField to re-render. If this value is an ObservableValue, then changing its value will cause the TextField to re-render.

The width of the listbox.

ariaLabel allows the caller to describe the elements contents to assistive technology.

className to pass to the listbox.

Optional tree columns if showTree is passed

className to pass to the listbox's container.

Callback to be called after the listBox renders.

A custom way to force single-select options in a multi-select selection.

Set to true to exclude all listbox rows from focus zones.

Set to true to remove tab stops from the listbox rows.

focuszoneProps allows the caller to manage the how the list box rows are focused.

This is called when updates are made to the listBox items to update the unselectbale items in the selection.

The caller may supply the set of items to be shown through the ItemProvider or array. The IItemProvider allows the caller to store their items in the form that bests suits their needs but gives the listbox a well defined interface for requesting the items. This can include async fetching of items through observables. Use an IItemProvider or something that implements it like ObservableArray If the items will be changing.

Set to true or false to trigger screen reader loading announcements. To show a loading indicator, pass an item of type ListBoxItemType.Loading in items.

onActivate is called when the row is activated. Activation occurs on the Enter keystroke or double click. @param event - This is the event that is causing the activation. @param tableRow - Details about the table row being activated.

onSelect is called when the row is selected. Selection occurs on the Space keystroke or click. @param event - This is the event that is causing the selection. @param item - Details about the list row being selected.

onToggle is called when an item is either expanded or collapsed. This will only do anything if the list box is being displayed as a tree. @param event - This is the event that is causing the toggle. @param treeItem - Details about the list item being toggled.

If provided, this will be called on each item to determine how it's rendered.

String to show when a search is in progress.

Set to true to show a searching indicator in place of the list and make a screenreader announcement. Set to null to cancel a search without making an announcement.

The selection maintains the selected state and defines the selection behavior of the list box. Defaults to a ListSelection with selectOnFocus set to false if not provided. Selection should be specified on mount and not updated to a new object during the Listbox's lifecycle.

Whether or not to display a column with checks or checkboxes for selected items. False by default, unless `props.selection.multiSelect` which makes it default true.

Set to true to show any current items while searching for more.

Whether or not to display items as a tree rather than a list ListBox will construct a tree using the parent field of ListBoxItems

The width of the listbox.

Optional tree columns if showTree is passed

className to pass to the listbox's container.

This is called when updates are made to the listBox items to update the unselectbale items in the selection.

The caller may supply the set of items to be shown through the ItemProvider or array. The IItemProvider allows the caller to store their items in the form that bests suits their needs but gives the listbox a well defined interface for requesting the items. This can include async fetching of items through observables. Use an IItemProvider or something that implements it like ObservableArray If the items will be changing.

Set to true or false to trigger screen reader loading announcements. To show a loading indicator, pass an item of type ListBoxItemType.Loading in items.

onSelect is called when the row is selected. Selection occurs on the Space keystroke or click. @param event - This is the event that is causing the selection. @param item - Details about the list row being selected.

onToggle is called when an item is either expanded or collapsed. This will only do anything if the list box is being displayed as a tree. @param event - This is the event that is causing the toggle. @param treeItem - Details about the list item being toggled.

If provided, this will be called on each item to determine how it's rendered.

String to show when a search is in progress.

Set to true to show a searching indicator in place of the list and make a screenreader announcement. Set to null to cancel a search without making an announcement.

The selection maintains the selected state and defines the selection behavior of the list box. Defaults to a ListSelection with selectOnFocus set to false if not provided. Selection should be specified on mount and not updated to a new object during the Listbox's lifecycle.

Set to true to show any current items while searching for more.

Whether or not to display items as a tree rather than a list ListBox will construct a tree using the parent field of ListBoxItems

The width of the listbox.

ariaLabel allows the caller to describe the element to assistive technology.

className to pass to the item's cell.

Optional item data to be used in custom render function.

Disabled items will get a disabled style by default and be ignored by focus and selection.

A custom way to force single-select options in a multi-select selection.

Expand this item when ListBox builds the tree

Provide to indicate this item belongs to a group. Use a GroupedItemProvider to arrange grouped items. This id is passed to the header html element for the group so it should be a valid html id.

Provide to render the item as a Link.

Props specifying the icon to render beside the item text.

Unique identifier of the item.

Optional parent of this item, used to build a tree in ListBox

A function to render custom item content.

Text to render in the item's row.

Optional tooltip props to apply to the ListBox row for this item. By default, an overflow tooltip is rendered with the item's text.

The type of list item. Headers and Separators ignore focus and selection.

Unique identifier for the group.

Set to true to indicate this group is loading. The GroupedItemProvider will check this value and add a loading cell if true.

Provide a custom loading item to be added if loading is true.

Display name for the group. Not needed if you are supplying your own header items.

The index of the column this cell is being rendered in.

Function to call after the row has finished rendering. Use this to trigger data fetching.

The column this cell is being rendered in.

The listbox item associated with this cell.