Click on CellTable swallowed

Question

I have a combo box consisting of a text box and a popup with a CellTable showing the elements of a sentence. The text field has a change handler that updates the CellTable selection.

When you enter a character and click on an already selected sentence, the first click is swallowed. The second click works and launches the selection through CellTable.addDomHandler (...).

Any idea why the first click is swallowed?

Code example:

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

Answer 1

I reproduced your problem, and here is the problem: when you click on the sentences, the following happens:

• The text field loses focus, which invokes the corresponding ChangeEvent, followed by the BlurEvent.
• A click pops up to get focus now, so it is swallowed.

If you remove the ChangeHandler and BlurHandler text fields, the problem goes away. But I think I found another solution. Try replacing the mTable DOM handler with the selection handler regarding mTableSelection as follows:

 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(); } }); } }); 

Answer 2

Found a way to properly solve this problem.

Skipping the blur handler when the user hovering over the sentence list area seems to have fixed this problem, at least from the tests performed there were no more problems.

This was necessary, because before the user clicks on the proposal element, the text is blurred and it causes a change in selection. This, in turn, cancels the choice made when the user clicks the item.