在Vaadin 8“NativeSelect”小部件上将“enabled”设置为false不会改变其外观也不会阻止其弹出

Question

在Vaadin 8.1.3应用中，我在布局上有一个NativeSelect组件，旁边有一个CheckBox。复选框上的监听器在弹出菜单（setEnabled）上调用NativeSelect，传递true或false。

如果 false ，我希望根据文档，小部件的外观会变暗。我希望弹出菜单在点击时不再弹出。这些期望都没有达到。无论是否启用，窗口小部件的外观都不会更改。单击时，窗口小部件将继续弹出菜单。那很糟糕。

当enabled设置为 false 时，从菜单中选择项目不再触发事件。响应菜单上的值更改的侦听器不再运行。那很好。

这是NativeSelect上的错误吗？ NativeSelect::setEnabled方法文档承诺：

  

...用户无法与禁用的组件进行交互，这些组件以指示状态的样式显示，通常以浅灰色阴影显示。 ...

是否有其他方法可以调暗NativeSelect的外观并禁用其菜单的显示？

总之，我在禁用的弹出菜单上寻找三种行为：

• 灰暗/暗淡的外观
• 点击后不再弹出
• 点击时不生成任何事件

setEnabled命令似乎承诺所有三颗子弹，但仅提供最后一颗子弹。

我对此行为感到惊讶，因为这是一个“本机”HTML对象。 select HTML对象被定义为在旧HTML和HTML5中都具有disable属性。此属性具有我需要的两种效果：alter display和make un-clickable。请参阅已禁用的HTML select小部件的this explanation和this demo。

我提交了Issue # 9956。

Answer 1

这是因为Vaadin Component interface提供了两种方法来调整组件：setEnabled()和 setReadOnly() - 您实际上正在寻找它。

以下是我的解决方案：

    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来css：

.transparency {
    opacity: 0.5;
}

Answer 2

正确与错误

如果禁用和/或只读，点击时NativeSelect弹出似乎有误。

如果已禁用（“显示带有指示状态的样式，通常以阴影显示）NativeSelect打破合同以显示灰色或类似的视觉提示，您似乎是正确的浅灰色“）。

示例应用

以下是单个班级中完整的Vaadin 8.1.3 / 8.1.4示例。

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
    {
    }
}

这是在 Safari Technology Preview 浏览器中运行时的屏幕截图。在 Vivaldi 浏览器中看到的行为相同。

• 第一个弹出菜单确实在点击时会弹出;其他三个没有。 （良好）
• 请注意，至少第二个和第四个应该在视觉上显示为灰色但不显示。 （坏）