Setting "enabled" to false on a Vaadin 8 `NativeSelect` widget does not alter its appearance nor stop it from popping-up

Question

In a Vaadin 8.1.3 app, I have a NativeSelect component on a layout, with a CheckBox next to it. The listener on the checkbox calls setEnabled on the popup-menu (the NativeSelect), passing true or false.

If false, I expected the widget to be dimmed in appearance, per the documentation. And I expected the popup menu to no longer pop up when clicked. Both of these expectations were not met. The widget does not change in appearance whether enabled or not. The widget continues to pop-up a menu when clicked. That's bad.

When enabled is set to false, choosing an item from the menu no longer triggers an event. The listener that responds to a value change on the menu no longer runs. That's good.

Is this a bug on the NativeSelect? The NativeSelect::setEnabled method documentation promises:

… The user can not interact with disabled components, which are shown with a style that indicates the status, usually shaded in light gray color. …

Is there some other way to dim the appearance of the NativeSelect and disable the display of its menu?

In summary, I am looking for three behaviors on a disabled popup menu:

• Grayed-out/dimmed appearance
• No longer pops up when clicked
• Generates no events when clicked

The setEnabled command seems to promise all three bullets but delivers only the last bullet.

I am surprised by this behavior, given that this is a "native" HTML object. The select HTML object is defined to have a disable attribute in both old HTML as well as HTML5. This attribute has both effects I need: alter display, and make un-clickable. See this explanation and this demo of the HTML select widget being disabled.

I filed Issue # 9956.

Answer 1

It's because Vaadin Component interface delivers two methods to adjust component: setEnabled() and setReadOnly() - which you are actually looking for.

Here is my solution for you:

    NativeSelect<String> nativeSelect = new NativeSelect<String>() {
        @Override
        public void setEnabled(boolean enabled)
        {
            super.setEnabled(enabled);
            setReadOnly(!enabled);
            if (enabled)
                removeStyleName("transparency");
            else
                addStyleName("transparency");
        }};

---

Add to css:

.transparency {
    opacity: 0.5;
}

Answer 2

Right and Wrong

You seem to be wrong about the NativeSelect popping up when clicked if disabled and/or read-only.

You seem to be right about the NativeSelect breaking its contract to display a graying-out or similar visual cue if disabled (“shown with a style that indicates the status, usually shaded in light gray color”).

Example app

Here is a complete example Vaadin 8.1.3/8.1.4 in a single class.

package com.example.vaadin.checkboxexample;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.HasValue;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.*;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

/**
 * This UI is the application entry point. A UI may either represent a browser window
 * (or tab) or some part of a html page where a Vaadin application is embedded.
 * <p>
 * The UI is initialized using {@link #init(VaadinRequest)}. This method is intended to be
 * overridden to add component to the user interface and initialize non-component functionality.
 *
 */
@Theme ( "mytheme" )
public class MyUI extends UI
{

    @Override
    protected void init ( VaadinRequest vaadinRequest )
    {
        // Widgets
        List < String > strings = Arrays.asList( "This" , "That" , "The other" , "Yet another" );

        // Default
        final NativeSelect < String > popupDefault = new NativeSelect( "Default:" , new ArrayList<>(strings) );
        popupDefault.setValue( strings.get( 3 ) );
        popupDefault.addValueChangeListener( ( HasValue.ValueChangeListener < String > ) valueChangeEvent ->
        {  System.out.println( "popupDefault selected: " + valueChangeEvent.getValue( ) ); } );

        // Disabled
        final NativeSelect < String > popupDisabled = new NativeSelect( "Disabled:" , new ArrayList<>(strings) );
        popupDisabled.setValue( strings.get( 3 ) );
        popupDisabled.addValueChangeListener( ( HasValue.ValueChangeListener < String > ) valueChangeEvent ->
        {  System.out.println( "popupDisabled selected: " + valueChangeEvent.getValue( ) ); } );
        popupDisabled.setEnabled( false );

        // ReadOnly
        final NativeSelect < String > popupReadOnly = new NativeSelect( "ReadOnly:" , new ArrayList<>(strings) );
        popupReadOnly.setValue( strings.get( 3 ) );
        popupReadOnly.addValueChangeListener( ( HasValue.ValueChangeListener < String > ) valueChangeEvent ->
        {  System.out.println( "popupReadOnly selected: " + valueChangeEvent.getValue( ) ); } );
        popupReadOnly.setReadOnly( true );

        // Disabled and  ReadOnly
        final NativeSelect < String > popupDisabledAndReadOnly = new NativeSelect( "Disabled & ReadOnly:" , new ArrayList<>(strings) );
        popupDisabledAndReadOnly.setValue( strings.get( 3 ) );
        popupDisabledAndReadOnly.addValueChangeListener( ( HasValue.ValueChangeListener < String > ) valueChangeEvent ->
        {  System.out.println( "popupDisabledAndReadOnly selected: " + valueChangeEvent.getValue( ) ); } );
        popupDisabledAndReadOnly.setEnabled( false );
        popupDisabledAndReadOnly.setReadOnly( true );

        // Layout
        final VerticalLayout layout = new VerticalLayout( );
        layout.addComponents( popupDefault , popupDisabled , popupReadOnly , popupDisabledAndReadOnly );
        setContent( layout );
    }

    @WebServlet ( urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true )
    @VaadinServletConfiguration ( ui = MyUI.class, productionMode = false )
    public static class MyUIServlet extends VaadinServlet
    {
    }
}

Here is a screen-shot when run in Safari Technology Preview browser. Same behaviors seen in Vivaldi browser.

• The first popup-menu does indeed popup when clicked; the others three do not. (Good)
• Note how at least the second and fourth should appear visually grayed-out but do not. (Bad)