Focus TextField within ConfirmDialog

I would like to use a TextField within a ConfirmDialog like this:

But I have two problems with it:

  1. How can i focus() the TextField after opening the dialog?
TextField commentField =
        new VTextField()
                .withFullWidth()
                .withValue(ddb.getComment());

ConfirmDialog confirmDialog = new ConfirmDialog("Comment for " + ddb.getFlightNumber(), null, "Save Comment", confirmEvent ->
        this.saveComment(ddb, commentField.getValue(), text, "Comment saved")
);
confirmDialog.setText(commentField);
confirmDialog.setCancelable(true);
confirmDialog.open();

commentField.focus(); // This does not work

The last call commentField.focus() does not work. The cursor is not within the TextField and a mouse click is needed.

  1. How can I “Save Comment” on klicking ENTER Key? (:white_check_mark: Solved - see below)

Update:
This workaround does it, but is there a more convenient method of doing it?

// Focus TextField
confirmDialog.getElement()
        .addEventListener("opened-changed", domEvent -> {
            boolean opened = domEvent.getEventData().getBoolean("event.detail.value");
            if (opened) {
                commentField.focus();
            }
        })
        .addEventData("event.detail.value");

Thank you!

Try the code for your 2nd issue:

commentField.addKeyPressListener(Key.ENTER, key ->{
    if (key.getKey().equals(Key.ENTER)) {
        // Save Comment
    }
});
1 Like

Thank you @watt-lee. Works nicely by closing the dialog itself:

commentField.addKeyPressListener(Key.ENTER, key -> {
    saveComment(ddb, commentField.getValue(), text, "Comment saved");
    confirmDialog.close();
});
1 Like