View Full Version : Editable Cell in Tree does not get focus

6 Sep 2014, 2:50 PM
I have added a Cell with input textbox into Tree node. When I click on the input Textbox to enter the text, the input textbox loses the focus instantly, so, I am not able to type anything. When I try trace the events, I noticed the "blur" event is fired immediately followed by "click" event. I think, because pf blur event, the input textbox loses the focus. But, I am not sure why does the "blur" get fired for "click" event. Do you have any suggestion to overcome this issue?

Cell code is below:

import com.google.gwt.cell.client.AbstractCell;import com.google.gwt.cell.client.ValueUpdater;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.NativeEvent;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.gwt.demo.client.gxt.model.BaseDto;

public class EditableTreeCell extends AbstractCell<BaseDto> {

public EditableTreeCell() {
super("change", "blur", "click", "keydown");

public void render(com.google.gwt.cell.client.Cell.Context context,
BaseDto value, SafeHtmlBuilder sb) {
sb.appendHtmlConstant("<div style=\"widht:100%;\">");
sb.appendHtmlConstant("<span id=\"labelId\">");
sb.appendHtmlConstant("<input id=\"textInputId\" type=\"text\"/ style=\"width:200px;\">");

public void onBrowserEvent(Context context, Element parent, BaseDto value,
NativeEvent event, ValueUpdater<BaseDto> valueUpdater) {

// Check that the value is not null.
if (value == null) {

// Call the super handler, which handlers the enter key.
super.onBrowserEvent(context, parent, value, event, valueUpdater);

final Element targetElement = event.getEventTarget().cast();

System.out.println("Event=" + event.getType() +" KeyCode=" + event.getKeyCode() + " Element=" + targetElement.getId());


Tree code snippet is below:

final Tree<BaseDto, BaseDto> tree = new Tree<BaseDto, BaseDto>(store, new ValueProvider<BaseDto, BaseDto>() {

public BaseDto getValue(BaseDto object) {
return object;

public void setValue(BaseDto object, BaseDto value) {

public String getPath() {
return "name";

EditableTreeCell cell = new EditableTreeCell();


The output printed in the console is below for input textbox click

Event=click KeyCode=0 Element=textInputIdEvent=blur KeyCode=0 Element=textInputId

Tree is looking like below in the browser

8 Jun 2015, 10:59 AM
I also encountered this issue. Did you solve it?

8 Jun 2015, 2:23 PM
I ended up using EditableTreeGrid - http://www.sencha.com/examples/#ExamplePlace:editabletreegrid