Press the button and send a message (Spring Boot and Vaadin)

Question

I created a chat, it works well. A message is sent only when I left-click on the "send" button. I want to simplify the use. How can I make a message go through the "Enter" button on the keyboard. Chat works without errors, everything seems to be fine. Only this task remains, how can this problem be solved?

Main view

@StyleSheet("frontend://styles/styles.css")
@Route
@PWA(name = "Vaadin Chat", shortName = "Vaadin Chat")
@Push
public class MainView extends VerticalLayout {
  private final UnicastProcessor<Message> publisher;
  private final Flux<Message> messages;
  private String username;

  @Autowired
  private RestService restService;

  public MainView(UnicastProcessor<Message> publisher,
                  Flux<Message> messages) {
    this.publisher = publisher;
    this.messages = messages;

    addClassName("main-view");
    setSizeFull();
    setDefaultHorizontalComponentAlignment(Alignment.CENTER);

    H1 header = new H1("Vaadin Chat");
    header.getElement().getThemeList().add("dark");

    add(header); 

    askUsername();
  }


  private void askUsername() {
    HorizontalLayout layout = new HorizontalLayout();
    TextField usernameField = new TextField();
    Button startButton = new Button("Start chat");

    layout.add(usernameField, startButton);

    startButton.addClickListener(click -> {
      username = usernameField.getValue();
      remove(layout);
      showChat();
    });

    add(layout);
  }

  private void showChat() {
    MessageList messageList = new MessageList();

    add(messageList, createInputLayout());
    expand(messageList);

    List<Message> lasts = restService.getLast();
    for (Message message : lasts)
      messageList.add(new Paragraph(message.getFrom() + ": " + message.getMessage()));


    messages.subscribe(message -> {
      getUI().ifPresent(ui ->
          ui.access(() ->
              messageList.add(
                  new Paragraph(message.getFrom() + ": " +
                      message.getMessage())
              )
          ));

      restService.saveMessage(message);
    });
  }

  private Component createInputLayout() {
    HorizontalLayout layout = new HorizontalLayout();
    layout.setWidth("100%");

    TextField messageField = new TextField();
    Button sendButton = new Button("Send");
    sendButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
    sendButton.addClickShortcut(Key.ENTER).listenOn(messageField);

    layout.add(messageField, sendButton);
    layout.expand(messageField);

    sendButton.addClickListener(click -> {
      publisher.onNext(new Message(username, messageField.getValue()));
      messageField.clear();
      messageField.focus();
    });
    messageField.focus();

    return layout;
  }

}

Answer 1

Starting from Vaadin 13, you can add a click shortcut to the button: someButton.addClickShortcut(someKey) . To limit the scope of the listener so that it only reacts when the text field has focus, you can supplement it with listenOn .

This is thus what would be needed in your case:

sendButton.addClickShortcut(Key.ENTER).listenOn(messageField);

Answer 2

You can add Enter Key Listener something like this

TextField myTextField = new TextField("A text field");
myTextField.setImmediate(true);
OnEnterKeyHandler onEnterHandler=new OnEnterKeyHandler(){
    @Override
    public void onEnterKeyPressed() {
        publisher.onNext(new Message(username, messageField.getValue()));
        messageField.clear();
        messageField.focus();
    }
};
onEnterHandler.installOn(myTextField);

You can see more detail here