CellTable 点击吞下

Posted 2023-02-26

【中文标题】CellTable 点击吞下

【英文标题】：CellTable click swallowed

【发布时间】：2016-01-28 16:45:33

【问题描述】：

我有一个组合框，它由一个文本字段和一个带有显示建议项的 CellTable 的弹出窗口组成。文本字段有一个更改处理程序，用于更新 CellTable 的选择。

当输入一个字符并点击一个已经选择的建议时，第一次点击会被吞掉。第二次单击起作用并通过 CellTable.addDomHandler(...) 触发选择。

知道为什么第一次点击会被吞没吗？

示例代码：

private static class SuggestFieldTextAndPopupSandbox extends SimplePanel 
        private final TextField mText;
        private CellTable<Handle<String>> mTable;
        private SingleSelectionModel<Handle<String>> mTableSelection;
        private SingleSelectionModel<Handle<String>> mSelection;
        private ProvidesKey<Handle<String>> mKeyProvider = new SimpleKeyProvider<Handle<String>>();
        private PopupPanel mPopup;
        private List<Handle<String>> mData;

        public SuggestFieldTextAndPopupSandbox() 
            mData = Lists.newArrayList(new Handle<String>("AAA"), new Handle<String>("AAB"), new Handle<String>("ABB"));
            mSelection = new SingleSelectionModel<Handle<String>>();

            mText = new TextField();
            mText.addKeyPressHandler(new KeyPressHandler() 
                @Override
                public void onKeyPress(KeyPressEvent pEvent) 
                    mPopup.showRelativeTo(mText);
                
            );
            mText.addBlurHandler(new BlurHandler() 
                @Override
                public void onBlur(BlurEvent pEvent) 
                    mTableSelection.setSelected(startsWith(mText.getValue()), true);
                
            );
            mText.addChangeHandler(new ChangeHandler() 

                @Override
                public void onChange(ChangeEvent pEvent) 
                    mText.setText(mText.getText().toUpperCase());
                
            );

            mTable = new CellTable<Handle<String>>(0, GWT.<TableResources>create(TableResources.class));

            mTable.setTableLayoutFixed(false);
            mTableSelection = new SingleSelectionModel<Handle<String>>(mKeyProvider);
            mTable.setSelectionModel(mTableSelection);
            mTable.addDomHandler(new ClickHandler() 
                @Override
                public void onClick(final ClickEvent pEvent) 
                    Scheduler.get().scheduleFinally(new ScheduledCommand() 

                        @Override
                        public void execute() 
                            mSelection.setSelected(mTableSelection.getSelectedObject(), true);
                            mText.setFocus(true);
                            mPopup.hide();
                        
                    );
                 
            , ClickEvent.getType());
            mTable.addColumn(new TextColumn<Handle<String>>() 
                @Override
                public String getValue(Handle<String> pObject) 
                    return pObject.get();
                
            );
            mTable.setRowData(mData);

            mPopup = new PopupPanel();
            mPopup.setAutoHideEnabled(true);
            mPopup.setWidget(mTable);
            mPopup.setWidth("200px");
            mPopup.setHeight("200px");

            VerticalPanel p = new VerticalPanel();
            p.add(mText);
            setWidget(p);
        

        private Handle<String> startsWith(final String pValue) 
            final String val = nullToEmpty(pValue).toLowerCase();
            int i = 0;
            for (Handle<String> item : mData) 
                String value = item.get();
                if (value != null && value.toLowerCase().startsWith(val)) 
                    return item;
                
                i++;
            
            return null;
        

    

【问题讨论】：

你能发布示例代码吗？单击未选择的建议时有什么不同吗？为什么不使用GWT SuggestBox？

【参考方案1】：

我复制了您的问题，问题如下： 当您单击建议时，会发生以下情况：

文本字段失去焦点，导致相应的 ChangeEvent 被处理，然后是 BlurEvent。 点击导致弹出窗口现在获得焦点，这就是它被吞下的原因。

如果您删除文本字段的 ChangeHandler 和 BlurHandler，问题就会消失。但我想我找到了另一个解决方案 尝试用相对于 mTab​​leSelection 的选择处理程序替换 mTab​​le 的 DOM 处理程序，如下所示：

mTableSelection.addSelectionChangeHandler(new Handler()

            @Override
            public void onSelectionChange(SelectionChangeEvent event) 
                Scheduler.get().scheduleFinally(new ScheduledCommand() 

                    @Override
                    public void execute() 
                        mSelection.setSelected(mTableSelection.getSelectedObject(), true);
                        mText.setFocus(true);
                        mPopup.hide();
                    
                );
            

        );

【讨论】：

谢谢，解决原始问题是个好主意，只是一个副作用是当用户只悬停表格而不单击时，文本的焦点会丢失。这会停止编辑并被视为错误。但是感谢您尝试运行该示例并提供帮助，因此如果一路上没有其他答案，我可以将赏金分配给您。

【参考方案2】：

找到了正确解决此问题的方法。

当用户将鼠标悬停在建议列表区域时跳过模糊处理程序似乎可以解决该问题，至少从已完成的测试来看，没有发现更多问题。

这是必要的，因为就在用户单击建议项之前，文本是模糊的，并且会触发选择更改。这反过来又取消了用户单击项目时所做的选择。