Package com.vaadin.flow.component.combobox

Class GeneratedVaadinComboBox<R extends GeneratedVaadinComboBox<R,​T>,​T>

  • All Implemented Interfaces:
    AttachNotifier, BlurNotifier<R>, DetachNotifier, Focusable<R>, FocusNotifier<R>, HasElement, HasEnabled, HasStyle, HasValue<AbstractField.ComponentValueChangeEvent<R,​T>,​T>, HasValueAndElement<AbstractField.ComponentValueChangeEvent<R,​T>,​T>, Serializable
    Direct Known Subclasses:
    ComboBox
    @Tag("vaadin-combo-box")
@NpmPackage(value="@vaadin/polymer-legacy-adapter",version="23.0.10") @NpmPackage(value="@vaadin/combo-box",version="23.0.10") @NpmPackage(value="@vaadin/vaadin-combo-box",version="23.0.10")
@JsModule("@vaadin/polymer-legacy-adapter/style-modules.js") @JsModule("@vaadin/combo-box/src/vaadin-combo-box.js") @JsModule("@vaadin/polymer-legacy-adapter/template-renderer.js")
public abstract class GeneratedVaadinComboBox<R extends GeneratedVaadinComboBox<R,​T>,​T>
extends AbstractSinglePropertyField<R,​T>
implements HasStyle, Focusable<R>

    Description copied from corresponding location in WebComponent:

    <vaadin-combo-box> is a combo box element combining a dropdown list with an input field for filtering the list of items. If you want to replace the default input field with a custom implementation, you should use the <vaadin-combo-box-light> element.

    Items in the dropdown list must be provided as a list of String values. Defining the items is done using the items property, which can be assigned with data-binding, using an attribute or directly with the JavaScript property.

    <vaadin-combo-box label="Fruit" items="[[data]]"> </vaadin-combo-box>

    combobox.items = ['apple', 'orange', 'banana'];

    When the selected value is changed, a value-changed event is triggered.

    This element can be used within an iron-form.

    Item rendering

    <vaadin-combo-box> supports using custom renderer callback function for defining the content of <vaadin-combo-box-item>.

    The renderer function provides root, comboBox, model arguments when applicable. Generate DOM content by using model object properties if needed, append it to the root element and control the state of the host element by accessing comboBox. Before generating new content, users are able to check if there is already content in root for reusing it.

    <vaadin-combo-box id="combo-box"></vaadin-combo-box> const comboBox = document.querySelector('#combo-box');comboBox.items = [ 'label': 'Hydrogen', 'value': 'H']; comboBox.renderer = function(root, comboBox, model) { root.innerHTML = model.index + ': ' + model.item.label + ' ' + '' + model.item.value + ''; };}

    Renderer is called on the opening of the combo-box and each time the related model is updated. DOM generated during the renderer call can be reused in the next renderer call and will be provided with the root argument. On first call it will be empty.

    Item Template

    Alternatively, the content of the <vaadin-combo-box-item> can be populated by using custom item template provided in the light DOM:

    <vaadin-combo-box items='[{"label": "Hydrogen", "value": "H"}]'> <template> [[index]]: [[item.label]] <b>[[item.value]</b> </template> </vaadin-combo-box>

    The following properties are available for item template bindings:

    Property name Type Description
    index Number Index of the item in the items array
    item String or Object The item reference
    selected Boolean True when item is selected
    focused Boolean True when item is focused

    Lazy Loading with Function Data Provider

    In addition to assigning an array to the items property, you can alternatively provide the <vaadin-combo-box> data through the dataProvider function property. The <vaadin-combo-box> calls this function lazily, only when it needs more data to be displayed.

    See the dataProvider in the API reference below for the detailed data provider arguments description, and the “Lazy Loading“ example on “Basics” page in the demos.

    Note that when using function data providers, the total number of items needs to be set manually. The total number of items can be returned in the second argument of the data provider callback:

    javascript comboBox.dataProvider = function(params, callback) var url = 'https://api.example/data' + '?page=' + params.page + // the requested page index '&amp;per_page=' + params.pageSize; // number of items on the page var xhr = new XMLHttpRequest(); xhr.onload = function() { var response = JSON.parse(xhr.responseText); callback( response.employees, // requested page of items response.totalSize // total number of items ); }; xhr.open('GET', url, true); xhr.send(); ;}

    Styling

    The following custom properties are available for styling:

    Custom property Description Default
    --vaadin-combo-box-overlay-max-height Property that determines the max height of overlay 65vh

    The following shadow DOM parts are available for styling:

    Part name Description
    text-field The text field
    toggle-button The toggle button

    See <vaadin-overlay> documentation for <vaadin-combo-box-overlay> parts.

    See <vaadin-text-field> documentation for the text field parts.

    The following state attributes are available for styling:

    Attribute Description Part name
    opened Set when the combo box dropdown is open :host
    disabled Set to a disabled combo box :host
    readonly Set to a read only combo box :host
    has-value Set when the element has a value :host
    invalid Set when the element is invalid :host
    focused Set when the element is focused :host
    focus-ring Set when the element is keyboard focused :host
    loading Set when new items are expected :host

    In addition to <vaadin-combo-box> itself, the following internal components are themable:

    • <vaadin-text-field>
    • <vaadin-combo-box-overlay>
    • <vaadin-combo-box-item>

    Note: the theme attribute value set on <vaadin-combo-box> is propagated to the internal themable components listed above.

    See ThemableMixin – how to apply styles for shadow parts

    See Also:
    Serialized Form

    • Constructor Detail

      • GeneratedVaadinComboBox

        public GeneratedVaadinComboBox​(T initialValue,
                               T defaultValue,
                               Class<P> elementPropertyType,
                               SerializableFunction<P,​T> presentationToModel,
                               SerializableFunction<T,​P> modelToPresentation)
        Constructs a new GeneratedVaadinComboBox component with the given arguments.
        Type Parameters:
        P - the property type
        Parameters:
        initialValue - the initial value to set to the value
        defaultValue - the default value to use if the value isn't defined
        elementPropertyType - the type of the element property
        presentationToModel - a function that converts a string value to a model value
        modelToPresentation - a function that converts a model value to a string value

      • GeneratedVaadinComboBox

        public GeneratedVaadinComboBox​(T initialValue,
                               T defaultValue,
                               boolean acceptNullValues)
        Constructs a new GeneratedVaadinComboBox component with the given arguments.
        Parameters:
        initialValue - the initial value to set to the value
        defaultValue - the default value to use if the value isn't defined
        acceptNullValues - whether null is accepted as a model value

      • GeneratedVaadinComboBox

        public GeneratedVaadinComboBox​(T initialValue,
                               T defaultValue,
                               Class<P> elementPropertyType,
                               SerializableBiFunction<R,​P,​T> presentationToModel,
                               SerializableBiFunction<R,​T,​P> modelToPresentation,
                               boolean isInitialValueOptional)
        Constructs a new GeneratedVaadinComboBox component with the given arguments.
        Type Parameters:
        P - the property type
        Parameters:
        initialValue - the initial value to set to the value
        defaultValue - the default value to use if the value isn't defined
        elementPropertyType - the type of the element property
        presentationToModel - a function that accepts this component and a property value and returns a model value
        modelToPresentation - a function that accepts this component and a model value and returns a property value
        isInitialValueOptional - if isInitialValueOptional is true then the initial value is used only if element has no "value" property value, otherwise element "value" property is ignored and the initial value is set

      • GeneratedVaadinComboBox

        public GeneratedVaadinComboBox​(T initialValue,
                               T defaultValue,
                               Class<P> elementPropertyType,
                               SerializableBiFunction<R,​P,​T> presentationToModel,
                               SerializableBiFunction<R,​T,​P> modelToPresentation)
        Constructs a new GeneratedVaadinComboBox component with the given arguments.
        Type Parameters:
        P - the property type
        Parameters:
        initialValue - the initial value to set to the value
        defaultValue - the default value to use if the value isn't defined
        elementPropertyType - the type of the element property
        presentationToModel - a function that accepts this component and a property value and returns a model value
        modelToPresentation - a function that accepts this component and a model value and returns a property value

      • GeneratedVaadinComboBox

        public GeneratedVaadinComboBox()
        Default constructor.

    • Method Detail

      • isAutofocusBoolean

        protected boolean isAutofocusBoolean()
        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.
        Returns:
        the autofocus property from the webcomponent

      • setAutofocus

        protected void setAutofocus​(boolean autofocus)
        Parameters:
        autofocus - the boolean value to set

      • isDisabledBoolean

        protected boolean isDisabledBoolean()

        Description copied from corresponding location in WebComponent:

        Set to true to disable this input.

        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:
        the disabled property from the webcomponent

      • setDisabled

        protected void setDisabled​(boolean disabled)

        Description copied from corresponding location in WebComponent:

        Set to true to disable this input.

        Parameters:
        disabled - the boolean value to set

      • getPageSizeDouble

        protected double getPageSizeDouble()

        Description copied from corresponding location in WebComponent:

        Number of items fetched at a time from the dataprovider.

        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:
        the pageSize property from the webcomponent

      • setPageSize

        protected void setPageSize​(double pageSize)

        Description copied from corresponding location in WebComponent:

        Number of items fetched at a time from the dataprovider.

        Parameters:
        pageSize - the double value to set

      • getSizeDouble

        protected double getSizeDouble()

        Description copied from corresponding location in WebComponent:

        Total number of items.

        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:
        the size property from the webcomponent

      • setSize

        protected void setSize​(double size)

        Description copied from corresponding location in WebComponent:

        Total number of items.

        Parameters:
        size - the double value to set

      • isOpenedBoolean

        @Synchronize(property="opened",
             value="opened-changed")
protected boolean isOpenedBoolean()

        Description copied from corresponding location in WebComponent:

        True if the dropdown is open, false otherwise.

        This property is synchronized automatically from client side when a 'opened-changed' event happens.

        Returns:
        the opened property from the webcomponent

      • setOpened

        protected void setOpened​(boolean opened)

        Description copied from corresponding location in WebComponent:

        True if the dropdown is open, false otherwise.

        Parameters:
        opened - the boolean value to set

      • isReadonlyBoolean

        protected boolean isReadonlyBoolean()
        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.
        Returns:
        the readonly property from the webcomponent

      • setReadonly

        protected void setReadonly​(boolean readonly)
        Parameters:
        readonly - the boolean value to set

      • getItemsJsonArray

        protected elemental.json.JsonArray getItemsJsonArray()

        Description copied from corresponding location in WebComponent:

        A full set of items to filter the visible options from. The items can be of either String or Object type.

        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:
        the items property from the webcomponent

      • setItems

        protected void setItems​(elemental.json.JsonArray items)

        Description copied from corresponding location in WebComponent:

        A full set of items to filter the visible options from. The items can be of either String or Object type.

        Parameters:
        items - the JsonArray value to set

      • isAllowCustomValueBoolean

        protected boolean isAllowCustomValueBoolean()

        Description copied from corresponding location in WebComponent:

        If true, the user can input a value that is not present in the items list. value property will be set to the input value in this case. Also, when value is set programmatically, the input value will be set to reflect that value.

        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:
        the allowCustomValue property from the webcomponent

      • setAllowCustomValue

        protected void setAllowCustomValue​(boolean allowCustomValue)

        Description copied from corresponding location in WebComponent:

        If true, the user can input a value that is not present in the items list. value property will be set to the input value in this case. Also, when value is set programmatically, the input value will be set to reflect that value.

        Parameters:
        allowCustomValue - the boolean value to set

      • getFilteredItemsJsonArray

        protected elemental.json.JsonArray getFilteredItemsJsonArray()

        Description copied from corresponding location in WebComponent:

        A subset of items, filtered based on the user input. Filtered items can be assigned directly to omit the internal filtering functionality. The items can be of either String or Object type.

        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:
        the filteredItems property from the webcomponent

      • setFilteredItems

        protected void setFilteredItems​(elemental.json.JsonArray filteredItems)

        Description copied from corresponding location in WebComponent:

        A subset of items, filtered based on the user input. Filtered items can be assigned directly to omit the internal filtering functionality. The items can be of either String or Object type.

        Parameters:
        filteredItems - the JsonArray value to set

      • isLoadingBoolean

        protected boolean isLoadingBoolean()

        Description copied from corresponding location in WebComponent:

        When set to true, "loading" attribute is added to host and the overlay element.

        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:
        the loading property from the webcomponent

      • setLoading

        protected void setLoading​(boolean loading)

        Description copied from corresponding location in WebComponent:

        When set to true, "loading" attribute is added to host and the overlay element.

        Parameters:
        loading - the boolean value to set

      • getFilterString

        @Synchronize(property="filter",
             value="filter-changed")
protected String getFilterString()

        Description copied from corresponding location in WebComponent:

        Filtering string the user has typed into the input field.

        This property is synchronized automatically from client side when a 'filter-changed' event happens.

        Returns:
        the filter property from the webcomponent

      • setFilter

        protected void setFilter​(String filter)

        Description copied from corresponding location in WebComponent:

        Filtering string the user has typed into the input field.

        Parameters:
        filter - the String value to set

      • getSelectedItemJsonObject

        @Synchronize(property="selectedItem",
             value="selected-item-changed")
protected elemental.json.JsonObject getSelectedItemJsonObject()

        Description copied from corresponding location in WebComponent:

        The selected item from the items array.

        This property is synchronized automatically from client side when a 'selected-item-changed' event happens.

        Returns:
        the selectedItem property from the webcomponent

      • setSelectedItem

        protected void setSelectedItem​(elemental.json.JsonObject selectedItem)

        Description copied from corresponding location in WebComponent:

        The selected item from the items array.

        Parameters:
        selectedItem - the JsonObject value to set

      • getItemLabelPathString

        protected String getItemLabelPathString()

        Description copied from corresponding location in WebComponent:

        Path for label of the item. If items is an array of objects, the itemLabelPath is used to fetch the displayed string label for each item.

        The item label is also used for matching items when processing user input, i.e., for filtering and selecting items.

        When using item templates, the property is still needed because it is used for filtering, and for displaying the selected item value in the input box.

        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:
        the itemLabelPath property from the webcomponent

      • setItemLabelPath

        protected void setItemLabelPath​(String itemLabelPath)

        Description copied from corresponding location in WebComponent:

        Path for label of the item. If items is an array of objects, the itemLabelPath is used to fetch the displayed string label for each item.

        The item label is also used for matching items when processing user input, i.e., for filtering and selecting items.

        When using item templates, the property is still needed because it is used for filtering, and for displaying the selected item value in the input box.

        Parameters:
        itemLabelPath - the String value to set

      • getItemValuePathString

        protected String getItemValuePathString()

        Description copied from corresponding location in WebComponent:

        Path for the value of the item. If items is an array of objects, the itemValuePath: is used to fetch the string value for the selected item.

        The item value is used in the value property of the combo box, to provide the form value.

        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:
        the itemValuePath property from the webcomponent

      • setItemValuePath

        protected void setItemValuePath​(String itemValuePath)

        Description copied from corresponding location in WebComponent:

        Path for the value of the item. If items is an array of objects, the itemValuePath: is used to fetch the string value for the selected item.

        The item value is used in the value property of the combo box, to provide the form value.

        Parameters:
        itemValuePath - the String value to set

      • getItemIdPathString

        protected String getItemIdPathString()

        Description copied from corresponding location in WebComponent:

        Path for the id of the item. If items is an array of objects, the itemIdPath is used to compare and identify the same item in selectedItem and filteredItems (items given by the dataProvider callback).

        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:
        the itemIdPath property from the webcomponent

      • setItemIdPath

        protected void setItemIdPath​(String itemIdPath)

        Description copied from corresponding location in WebComponent:

        Path for the id of the item. If items is an array of objects, the itemIdPath is used to compare and identify the same item in selectedItem and filteredItems (items given by the dataProvider callback).

        Parameters:
        itemIdPath - the String value to set

      • getNameString

        protected String getNameString()

        Description copied from corresponding location in WebComponent:

        The name of this element.

        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:
        the name property from the webcomponent

      • setName

        protected void setName​(String name)

        Description copied from corresponding location in WebComponent:

        The name of this element.

        Parameters:
        name - the String value to set

      • isInvalidBoolean

        @Synchronize(property="invalid",
             value="invalid-changed")
protected boolean isInvalidBoolean()

        Description copied from corresponding location in WebComponent:

        Set to true if the value is invalid.

        This property is synchronized automatically from client side when a 'invalid-changed' event happens.

        Returns:
        the invalid property from the webcomponent

      • setInvalid

        protected void setInvalid​(boolean invalid)

        Description copied from corresponding location in WebComponent:

        Set to true if the value is invalid.

        Parameters:
        invalid - the boolean value to set

      • getLabelString

        protected String getLabelString()

        Description copied from corresponding location in WebComponent:

        The label for this element.

        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:
        the label property from the webcomponent

      • setLabel

        protected void setLabel​(String label)

        Description copied from corresponding location in WebComponent:

        The label for this element.

        Parameters:
        label - the String value to set

      • isRequiredBoolean

        protected boolean isRequiredBoolean()

        Description copied from corresponding location in WebComponent:

        Set to true to mark the input as required.

        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:
        the required property from the webcomponent

      • setRequired

        protected void setRequired​(boolean required)

        Description copied from corresponding location in WebComponent:

        Set to true to mark the input as required.

        Parameters:
        required - the boolean value to set

      • isPreventInvalidInputBoolean

        protected boolean isPreventInvalidInputBoolean()

        Description copied from corresponding location in WebComponent:

        Set to true to prevent the user from entering invalid input.

        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:
        the preventInvalidInput property from the webcomponent

      • setPreventInvalidInput

        protected void setPreventInvalidInput​(boolean preventInvalidInput)

        Description copied from corresponding location in WebComponent:

        Set to true to prevent the user from entering invalid input.

        Parameters:
        preventInvalidInput - the boolean value to set

      • getPatternString

        protected String getPatternString()

        Description copied from corresponding location in WebComponent:

        A pattern to validate the input with.

        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:
        the pattern property from the webcomponent

      • setPattern

        protected void setPattern​(String pattern)

        Description copied from corresponding location in WebComponent:

        A pattern to validate the input with.

        Parameters:
        pattern - the String value to set

      • getErrorMessageString

        protected String getErrorMessageString()

        Description copied from corresponding location in WebComponent:

        The error message to display when the input is invalid.

        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:
        the errorMessage property from the webcomponent

      • setErrorMessage

        protected void setErrorMessage​(String errorMessage)

        Description copied from corresponding location in WebComponent:

        The error message to display when the input is invalid.

        Parameters:
        errorMessage - the String value to set

      • getPlaceholderString

        protected String getPlaceholderString()

        Description copied from corresponding location in WebComponent:

        A placeholder string in addition to the label.

        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:
        the placeholder property from the webcomponent

      • setPlaceholder

        protected void setPlaceholder​(String placeholder)

        Description copied from corresponding location in WebComponent:

        A placeholder string in addition to the label.

        Parameters:
        placeholder - the String value to set

      • isClearButtonVisibleBoolean

        protected boolean isClearButtonVisibleBoolean()

        Description copied from corresponding location in WebComponent:

        Set to true to display the clear icon which clears the input.

        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:
        the clearButtonVisible property from the webcomponent

      • setClearButtonVisible

        protected void setClearButtonVisible​(boolean clearButtonVisible)

        Description copied from corresponding location in WebComponent:

        Set to true to display the clear icon which clears the input.

        Parameters:
        clearButtonVisible - the boolean value to set

      • clearCache

        protected void clearCache()

        Description copied from corresponding location in WebComponent:

        Clears the cached pages and reloads data from dataprovider when needed.

      • open

        protected void open()

        Description copied from corresponding location in WebComponent:

        Opens the dropdown list.

      • close

        protected void close()

        Description copied from corresponding location in WebComponent:

        Closes the dropdown list.

      • cancel

        protected void cancel()

        Description copied from corresponding location in WebComponent:

        Reverts back to original value.

      • validate

        @NotSupported
protected void validate()

        Description copied from corresponding location in WebComponent:

        Returns true if value is valid, and sets the invalid flag appropriately.

        This function is not supported by Flow because it returns a boolean. Functions with return types different than void are not supported at this moment.

      • checkValidity

        protected void checkValidity()

        Description copied from corresponding location in WebComponent:

        Returns true if the current input value satisfies all constraints (if any)

        You can override the checkValidity method for custom validations.

      • remove

        protected void remove​(Component... components)
        Removes the given child components from this component.
        Parameters:
        components - The components to remove.
        Throws:
        IllegalArgumentException - if any of the components is not a child of this component.

      • removeAll

        protected void removeAll()
        Removes all contents from this component, this includes child components, text content as well as child elements that have been added directly to this component using the Element API.