Combo Box not focusing on selected value on clicking picker icon if the selected value is is at scrollable location

[sidharth1917]

Hi,

I am working on SmartGWT version 12.1-p20210819 . I am trying to implement a combo box item in my grid.
Currently I am facing issue that If the selected value is at scrollable position in the dropdown then while clicking picker icon it doesn't focus to the selected value and while scrolling if the user changes the focus the selected value highlight is getting missed.
Attaching screen recoding for reference.

Please let us know how can we do focus on the selected element which is at at scrollable position in combo box item


public final class MyApplicationEntryPoint implements EntryPoint {

ListGrid grid = new ListGrid();

public void onModuleLoad() {
grid.setDataSource("CountriesInfoSQL");

DataSource ds = grid.getDataSource();
if (ds == null) {
GWT.log("Error connecting to datasource");
}
ListGridField countryField = new ListGridField("countryName", "Country");
ListGridField continentNameField = new ListGridField("continent", "Continent");
ListGridField independenceField = new ListGridField("independence", "Independence");
independenceField.setType(ListGridFieldType.DATE);
ListGridField populationField = new ListGridField("population", "Population");
populationField.setType(ListGridFieldType.INTEGER);
ListGridField memberG8Field = new ListGridField("memberG8", "Member G8");
memberG8Field.setType(ListGridFieldType.BOOLEAN);
memberG8Field.setDefaultValue(false);

ComboBoxItem item = new ComboBoxItem();
item.setValueMap(getCitizensValueMap());
item.setPickListHeight(80);
ListGridField citizen = new ListGridField("citizen", "Citizen");

citizen.setEditorProperties(item);
grid.setFields(new ListGridField[] { countryField, continentNameField, memberG8Field, populationField,
independenceField,citizen});
grid.setAutoFetchData(true);
grid.setCanEdit(true);
grid.setSortByGroupFirst(true);
grid.setAutoSaveEdits(false);
grid.setAlign(Alignment.CENTER);


VLayout mainLayout = new VLayout();
mainLayout.setWidth(512);
mainLayout.setHeight(400);
mainLayout.addMember(grid);

DynamicForm layout = new DynamicForm();
layout.setFields(bulkSelect);
mainLayout.addMember(layout);
mainLayout.addMember(new LayoutSpacer(20, 20));

HLayout buttonsLayout = new HLayout();
IButton newButton = new IButton("New");
IButton saveButton = new IButton("Save");
IButton discardButton = new IButton("Discard");

buttonsLayout.addMembers(newButton, new LayoutSpacer(5, 5), saveButton, new LayoutSpacer(5, 5), discardButton);
mainLayout.addMember(buttonsLayout);
mainLayout.draw();

IntegerRangeValidator populationRangeValidator = new IntegerRangeValidator();
populationRangeValidator.setMin(1);
populationRangeValidator.setMax(100000000);
grid.setValidateOnChange(true);
populationField.setValidators(populationRangeValidator);
try {

newButton.addClickHandler(new ClickHandler() {

@Override
public void onClick(ClickEvent event) {
GWT.log("Add Row Button Clicked");
grid.startEditingNew();

}
});

saveButton.addClickHandler(new ClickHandler() {

@Override
public void onClick(ClickEvent event) {
grid.saveAllEdits();

}
});

discardButton.addClickHandler(new ClickHandler() {

@Override
public void onClick(ClickEvent event) {
grid.removeData(grid.getSelectedRecord());
}
});
} catch (Exception e) {
GWT.log(e.getLocalizedMessage(), e);
}
}

private Map<String, String> getCitizensValueMap(){
Map<String,String> values = new HashMap<String, String>();
values.put("test", "test");
values.put("test1", "test1");
values.put("test2", "test2");
values.put("test3", "test3");
values.put("test4", "test");
values.put("test5", "test5");
values.put("test6", "test6");
values.put("test7", "test7");
values.put("test8", "test8");
values.put("test9", "test9");
values.put("test10", "test10");
values.put("test11", "test11");
values.put("test12", "test12");
values.put("test13", "test13");

values.put("test14", "test14");
values.put("test15", "test15");
return values;
}

}
Have tried this in sample ListGrid code also

1. import com.smartgwt.client.types.ListGridFieldType;
2. import com.smartgwt.client.widgets.Canvas;
3. import com.smartgwt.client.widgets.grid.ListGrid;
4. import com.smartgwt.client.widgets.grid.ListGridField;
5. import com.smartgwt.sample.showcase.client.data.CountrySampleData;
6. import com.google.gwt.core.client.EntryPoint;
7. public class GridDataBindingListGridFieldsSample implements EntryPoint {
8. public void onModuleLoad() {
9. final ListGrid countryGrid = new ListGrid();
10. countryGrid.setWidth(500);
11. countryGrid.setHeight(224);
12. countryGrid.setShowAllRecords(true);
13. ListGridField countryCodeField = new ListGridField("countryCode", "Code", 50);
14. ListGridField nameField = new ListGridField("countryName", "Country");
15. ListGridField independenceField = new ListGridField("independence", "Nationhood", 110);
16. independenceField.setType(ListGridFieldType.DATE);
17. ListGridField populationField = new ListGridField("population", "Population");
18. populationField.setType(ListGridFieldType.INTEGER);
19. ListGridField gdpField = new ListGridField("gdp", "GDP ($B)", 120);
20. gdpField.setType(ListGridFieldType.FLOAT);
21. countryGrid.setFields(new ListGridField[] {countryCodeField, nameField, independenceField,
22. populationField, gdpField});
23. countryGrid.setCanResizeFields(true);
24. countryGrid.setData(CountrySampleData.getRecords());
25. countryGrid.draw();
26. }
27. }

[Isomorphic]

If a row is not loaded, we do not scroll to the row because we can’t, and loading potentially unlimited batches of rows to try to find the previously selected row would not be a good idea.

If you know for sure that the dataset will remain small, you can just configure the comboBox to load all rows.

Other than that, the existing UI is the right balance between convenience and scalability.

[sidharth1917]

But in my example I have assigned static data source to the combo box so all he values get loaded yet the same problem exists it looses the focus while opening as it loads from the start but not from the selected value page
snippet :

ComboBoxItem item = new ComboBoxItem();
item.setValueMap(getCitizensValueMap());

!-- Citizen Value Datasource--!
private Map<String, String> getCitizensValueMap(){
Map<String,String> values = new HashMap<String, String>();
values.put("test", "test");
values.put("test1", "test1");
values.put("test2", "test2");
values.put("test3", "test3");
values.put("test4", "test");
values.put("test5", "test5");
values.put("test6", "test6");
values.put("test7", "test7");
values.put("test8", "test8");
values.put("test9", "test9");
values.put("test10", "test10");
values.put("test11", "test11");
values.put("test12", "test12");
values.put("test13", "test13");

values.put("test14", "test14");
values.put("test15", "test15");
return values;
}

[Isomorphic]

We can't tell from your sample code, because it's incomplete, but you are reporting something that does not occur in similar samples and test cases.

Since your support is expired and we have had no response on renewing it for a while, this issue is now closed.