Bug: RowEditor editing a row can't click to set focus on fields GXT 2.2.5

[somuchh8]

Versions:
GWT 2.4.0
GXT 2.2.5

Browsers Tested(Windows):
IE8
Firefox 3.6

Problem:
In IE8 I have a Grid with a RowEditor plugin. When editing I have a row with a TextField, ComboBox, NumberField, and DateField but unless I click on text which is inside an editable field I can not click to set the focus on any of the fields. Firefox 3.6 doesn't have this problem. If I use the sencha.com/examples and try the RowEditor Grid using IE8 I can not reproduce the problem.

Demonstrate the problem:

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


import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.data.BaseModel;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.form.DateField;
import com.extjs.gxt.ui.client.widget.form.NumberField;
import com.extjs.gxt.ui.client.widget.form.SimpleComboBox;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.form.ComboBox.TriggerAction;
import com.extjs.gxt.ui.client.widget.grid.CellEditor;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.grid.RowEditor;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.i18n.client.NumberFormat;


public class PopupRowEditorTestTable extends Window 
{
    private DateTimeFormat df = DateTimeFormat.getFormat("MM/dd/y");


    public PopupRowEditorTestTable()
    {
        super();
            
        setLayout(new FitLayout());


        final SimpleComboBox<String> combo = new SimpleComboBox<String>();
        combo.setForceSelection(true);
        combo.setTriggerAction(TriggerAction.ALL);
        combo.add("Bob");
        combo.add("Harry");
        combo.add("Frank");
        
        TextField<String> inputText = new TextField<String>();
        inputText.setAllowBlank(false);
        
        List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
        
        ColumnConfig column = new ColumnConfig();  
        column.setId("TEXT");  
        column.setHeader("text");  
        column.setWidth(220);  
        column.setEditor(new CellEditor(inputText));
        configs.add(column);
        
        CellEditor editor = new CellEditor(combo) {  
            @Override  
            public Object preProcessValue(Object value) {  
              if (value == null) {  
                return value;  
              }  
              return combo.findModel(value.toString());  
            }  
        
            @Override  
            public Object postProcessValue(Object value) {  
              if (value == null) {  
                return value;  
              }  
              return ((ModelData) value).get("value");  
            }  
          };  
        
          column = new ColumnConfig();  
          column.setId("COMBO");  
          column.setHeader("combo");  
          column.setWidth(65);  
          column.setEditor(editor);  
          configs.add(column);  
          
          column = new ColumnConfig();  
          column.setId("NUMBER");  
          column.setHeader("number");  
          column.setAlignment(HorizontalAlignment.RIGHT);  
          column.setWidth(55);  
          column.setNumberFormat(NumberFormat.getCurrencyFormat());  
          column.setEditor(new CellEditor(new NumberField()));  
          
          configs.add(column);  
          
          DateField dateField = new DateField();  
          dateField.getPropertyEditor().setFormat(DateTimeFormat.getFormat("MM/dd/y"));  
        
          column = new ColumnConfig();  
          column.setId("DATE");  
          column.setHeader("date");  
          column.setWidth(95);  
          column.setEditor(new CellEditor(dateField));  
          column.setDateTimeFormat(DateTimeFormat.getFormat("MMM dd yyyy"));  
          configs.add(column);  
          
          ColumnModel cm = new ColumnModel(configs);  
          
          List<ModelData> models = new ArrayList<ModelData>();
          BaseModel model = new BaseModel();
          model.set("COMBO", "Bob");


          model.set("TEXT", "delete, click off, try to regain focus by clicking");


          model.set("NUMBER", 2.3);
          model.set("DATE", df.parse("03/15/2006"));
          models.add(model);
          
          ListStore<ModelData> store = new ListStore<ModelData>();
          store.add(models);
          
          final RowEditor<ModelData> re = new RowEditor<ModelData>();  
          final Grid<ModelData> grid = new Grid<ModelData>(store, cm);  
          grid.setAutoExpandColumn("TEXT");  
          grid.setBorders(false);  
          grid.addPlugin(re);
          grid.getView().setForceFit(true);
          grid.getView().setAutoFill(true);
                
          add(grid);
          setSize(600, 150);
    }
    
    
}

[somuchh8]

Hmm, so I guess I'm the only one having trouble with the RowEditor in 2.2.5?

[dariusjb]

The issue is coming from the Window component, it is stealing the focus from your field, because the field is into a Cell, and the SelectionModel for the grid or even for the roweditor, do not comply with Window management of Focus.

your need to override the handleMouseClick(GridEvent e) from the GridSelectionModel,
let it do it s super stuff
if(isInput(e.getTarget()))
then
refWindow.setFocusWidget(current_field),
refWindow.focus();

current_field can be found, from the selected item from the event
refWindow needs to be replaced by your current this object.

If Sven has a nicer explanation and solution, I also would like to know how to regain full access to selecting the text input into my field, using the Mouse down event. I can only use my keybord when the grid is into a Window.

[sven]

Try to extend window and clear out the doFocus method.

[dariusjb]

Hi Sven,

Do you think ithis is why the text from the input field cannot be selected using mouse pointer?

Without overriding Window, with my method, I can gain focus on the text field, but I cannot select the text.
I can only use the keyboard to change the text.

Thank you for your answer.

[nageshm]

Hi Somuchh8,

I am also getting the same problem, did you find any solution for that?

Regards,
Nagesh

[rvijayakumar@ultramain]

Hi,

I am using GridInlineEditing where I am trying to use a StringComboBox as editor. When I click the combo box to change value the cell is stealing the focus not allowing me to change the value in Combo Box. How to Gain the focus or resolve it.?

I am using Gxt 3.1.4