popup | Tech Tips & Tricks

This was annoying to begin with. In Swing, you do not have to worry about this because this feature is already part of it. In Java FX 2 however, it is not and I had to create a key listener to have the ComboBox select the first item that it comes across with that starts with the key character pressed.

And there is also another problem. If the ComboBox has so many items and the setVisibleRowCount() value is less than the number of the list size, it will not scroll down if the item selected is beyond the maximum visible row value.

It also took me some time to figure out how to get hold of the ListView reference from the ComboBox since this control is a combination of multiple controls: ListView, TextField and Button to name a few. You can only get hold of the ListView object from ComboBox if the popup is shown. Otherwise, you will get a NullPointerException.

So here is the key listener code.

public class SelectKeyComboBoxListener implements EventHandler<KeyEvent> {
    private ComboBox comboBox;
    private StringBuilder sb = new StringBuilder();
    public SelectKeyComboBoxListener(ComboBox comboBox) {
        this.comboBox = comboBox;
        this.comboBox.setOnKeyReleased(SelectKeyComboBoxListener.this);
        this.comboBox.addEventFilter(KeyEvent.KEY_RELEASED, new EventHandler<KeyEvent>() {
            @Override
            public void handle(KeyEvent event) {
                if (event.getCode() == KeyCode.ESCAPE && sb.length() > 0) {
                    sb.delete(0, sb.length());
                }
            }
        });
        // add a focus listener such that if not in focus, reset the filtered typed keys
        this.comboBox.focusedProperty().addListener(new ChangeListener() {
            @Override
            public void changed(ObservableValue observable, Object oldValue, Object newValue) {
                if (newValue instanceof Boolean && !((Boolean) newValue).booleanValue())
                    sb.delete(0, sb.length());
                else {
                    ListView lv = ((ComboBoxListViewSkin) SelectKeyComboBoxListener.this.comboBox.getSkin()).getListView();
                    lv.scrollTo(lv.getSelectionModel().getSelectedIndex());
                }
            }
        });
        this.comboBox.setOnMouseClicked(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent event) {
                ListView lv = ((ComboBoxListViewSkin) SelectKeyComboBoxListener.this.comboBox.getSkin()).getListView();
                lv.scrollTo(lv.getSelectionModel().getSelectedIndex());                
            }            
        });
    }
    @Override
    public void handle(KeyEvent event) {
        if (event.getCode() == KeyCode.DOWN || event.getCode() == KeyCode.UP || event.getCode() == KeyCode.TAB) {
            return;
        }
        else if (event.getCode() == KeyCode.BACK_SPACE && sb.length() > 0) {
            sb.deleteCharAt(sb.length()-1);
        }
       else {
            sb.append(event.getText());
        }
        if (sb.length() == 0) 
            return;
        boolean found = false;
        ObservableList items = comboBox.getItems();
        for (int i=0; i<items.size(); i++) {
            if (event.getCode() != KeyCode.BACK_SPACE && items.get(i).toString().toLowerCase().startsWith(sb.toString().toLowerCase())) {
                ListView lv = ((ComboBoxListViewSkin) comboBox.getSkin()).getListView();
                lv.getSelectionModel().clearAndSelect(i);           
                lv.scrollTo(lv.getSelectionModel().getSelectedIndex());
                found = true;
                break;
            }
        }
        if (!found && sb.length() > 0)
            sb.deleteCharAt(sb.length() - 1);
    }

public class SelectKeyComboBoxListener implements EventHandler<KeyEvent> {

private ComboBox comboBox;

private StringBuilder sb = new StringBuilder();

public SelectKeyComboBoxListener(ComboBox comboBox) {

this.comboBox = comboBox;

this.comboBox.setOnKeyReleased(SelectKeyComboBoxListener.this);

this.comboBox.addEventFilter(KeyEvent.KEY_RELEASED, new EventHandler<KeyEvent>() {

@Override

public void handle(KeyEvent event) {

if (event.getCode() == KeyCode.ESCAPE && sb.length() > 0) {

sb.delete(0, sb.length());

}

});

// add a focus listener such that if not in focus, reset the filtered typed keys

this.comboBox.focusedProperty().addListener(new ChangeListener() {

@Override

public void changed(ObservableValue observable, Object oldValue, Object newValue) {

if (newValue instanceof Boolean && !((Boolean) newValue).booleanValue())

sb.delete(0, sb.length());

else {

ListView lv = ((ComboBoxListViewSkin) SelectKeyComboBoxListener.this.comboBox.getSkin()).getListView();

lv.scrollTo(lv.getSelectionModel().getSelectedIndex());

}

});

this.comboBox.setOnMouseClicked(new EventHandler<MouseEvent>() {

@Override

public void handle(MouseEvent event) {

ListView lv = ((ComboBoxListViewSkin) SelectKeyComboBoxListener.this.comboBox.getSkin()).getListView();

lv.scrollTo(lv.getSelectionModel().getSelectedIndex());

}

});

}

@Override

public void handle(KeyEvent event) {

if (event.getCode() == KeyCode.DOWN || event.getCode() == KeyCode.UP || event.getCode() == KeyCode.TAB) {

return;

}

else if (event.getCode() == KeyCode.BACK_SPACE && sb.length() > 0) {

sb.deleteCharAt(sb.length()-1);

}

else {

sb.append(event.getText());

}

if (sb.length() == 0)

return;

boolean found = false;

ObservableList items = comboBox.getItems();

for (int i=0; i<items.size(); i++) {

if (event.getCode() != KeyCode.BACK_SPACE && items.get(i).toString().toLowerCase().startsWith(sb.toString().toLowerCase())) {

ListView lv = ((ComboBoxListViewSkin) comboBox.getSkin()).getListView();

lv.getSelectionModel().clearAndSelect(i);

lv.scrollTo(lv.getSelectionModel().getSelectedIndex());

found = true;

break;

}

if (!found && sb.length() > 0)

sb.deleteCharAt(sb.length() - 1);

}

How this works goes like this. When you type a character, it will go to the first item that matches that character, regardless of case sensitivity. If you transfer to another control, its cached characters will be removed so that when you go back to the ComboBox again, the cached string that you used to type will be reset.

You may notice that I also added an event filter for the ComboBox. This is because the ESC key does not get detected unless it is filtered. I really do not understand the inner workings but the ESC key gets detected only if it is captured in the event filter. When this happens, the keys will reset and any key you type will be considered as the first character.

I also added a mouse listener on the ComboBox so that when it is clicked and the popup list will appear, I will be able to get hold of the reference object to ListView and be able to call its scrollTo() method.

That’s it! To use this class, just call it like this:

new SelectKeyComboBoxListener(comboBox);

1	new SelectKeyComboBoxListener(comboBox);

Tag: popup