SelectFieldView

A dropdown selection field that allows users to choose from a predefined list of options.

SelectFieldView provides a text-based dropdown interface with keyboard navigation support. It displays the currently selected value and shows a dropdown list when activated. The field supports null values, keyboard shortcuts, and intelligent positioning of the dropdown list.

Key features:

• Dropdown list with hover and click selection
• Keyboard navigation (Arrow keys, Enter, Space, Escape)
• Support for null values with custom text
• Auto-positioning above/below based on available space
• Focus management and escape handling
• Clipping support for scrollable containers

Usage example:

var selectField = new SelectFieldView();
selectField.list = ['Option 1', 'Option 2', 'Option 3'];
selectField.nullValueText = 'Choose an option...';
selectField.value = 'Option 1';
selectField.onValueChange(this, (value, prev) -> {
    trace('Selected: ' + value);
});
add(selectField);

Instance Members #

Custom theme override for this select field. If null, uses the global context theme

The currently selected value. Can be null if no value is selected

Array of available options to choose from

Text to display when value is null. If null, empty text is shown

Visual style of the field (DEFAULT, OVERLAY, or MINIMAL)

Whether to clip the dropdown list to scrollable container bounds

Hook called when the field value changes.

Override this function to implement custom behavior when the value is set. The default implementation does nothing.

Handles focus events for the field.

Currently delegates to parent focus behavior. Text editing is disabled for select fields in favor of dropdown selection.

Creates a new SelectFieldView.

Sets up the field container, text display, dropdown positioning, keyboard navigation, and all necessary event handlers.

Private Members #

Maximum height of the dropdown list in pixels

Height of each item in the dropdown list

Whether the dropdown list is currently visible

Container for the field display elements

Text view displaying the current selection

The dropdown list view component

Container for positioning the dropdown list

Arrow/triangle indicator showing dropdown availability

Whether the dropdown list is positioned above the field

Tracks if list was visible in the current frame for input handling

Event when theme field changes.

Event when value field changes.

Event when list field changes.

Event when nullValueText field changes.

Event when inputStyle field changes.

Event when listVisible field changes.

Layouts the field container and clips text to fit available space.

Ensures the displayed text doesn't overflow into the dropdown arrow area by clipping it to the available width minus arrow space.

Layouts the dropdown list container.

Sizes the list view to match the field width and calculated height based on the number of available options.

Calculates the optimal height for the dropdown list.

Updates the displayed text based on the current value.

Shows the selected value or the null value text if no value is selected. Sanitizes the display text by trimming whitespace and replacing newlines.

Toggles the visibility of the dropdown list.

Metadata #