Vaadin add values to list

Question

I would like to have this functionality in my program:

I will have a user input field. When the user pressed the button, it will be added to the list, and input will be shown to the user.

The problem is, I would like to deselect/remove those input if the user wants. I could not achieve this.

Here is the code I have written so far, I have removed some functionality unnecessary for the question's scope:

public class AddUserInput extends VerticalLayout{

    // The user input will be added to the this list
    // later, this list will be sent to the server for some verification
    private List<String> emails;

    private HorizontalLayout content;
    private VerticalLayout rows;
    // user input field
    private TextField emailField = new TextField("Enter email address");

    public AddUserInput() {
        content = new HorizontalLayout();
        rows = new VerticalLayout();

        content.setMargin(true);
        Button addToListButton= new Button("Add to list");
        addToListButton.addClickListener(new Button.ClickListener() {
            @Override
            public void buttonClick(Button.ClickEvent event) {
                // When the user clicks add to list button
                // The raw input will be added to the emails list
                // The UI component is added to 'rows' component
                rows.addComponent(addNewRow(emailField.getValue()));
            }
        });

        content.addComponents(emailField, addToListButton, rows);

        addComponent(content);
    }

    public Component addNewRow(String email){
        HorizontalLayout newRow = new HorizontalLayout();

        Button deleteRowButton = new Button("-");

        deleteRowButton.addClickListener(new Button.ClickListener() {
            @Override
            public void buttonClick(Button.ClickEvent event) {
                // I can delete from the UI by using the code below
                newRow.removeAllComponents();
                rows.removeComponent(newRow);
                // How to remove from the email list???

            }
        });

        emails.add(emailField.getValue());
        Label lastEmail = new Label(emailField.getValue());
        emailField.clear();
        newRow.addComponents(lastEmail,deleteRowButton);

        return newRow;
    }

}

Is there any component/library that does this functionality?

I only need a text field, and adding the input to the list, and removing the list item if a user wants to.

The visualization of the code above:

Answer 1

You could use the NativeSelect component for managing the entered Strings.

I modified your AddUserInput-Component to use a NativeSelect and a corresponding DataProvider:

public class AddUserInput extends VerticalLayout {

    private HorizontalLayout content = new HorizontalLayout();;
    private NativeSelect<String> select = new NativeSelect<>("The List");
    private ListDataProvider<String> dataProvider = DataProvider.ofCollection(new ArrayList<>());
    private Button addToListButton= new Button("Add to list");
    private Button deleteFromListButton = new Button("-");
    private TextField emailField = new TextField("Enter email address");

    public AddUserInput() {
        select.setVisibleItemCount(5);
        select.setWidth("100px");
        select.setDataProvider(dataProvider);
        select.setEmptySelectionAllowed(false);
        deleteFromListButton.setEnabled(false);
        content.setMargin(true);
        addToListButton.addClickListener(new Button.ClickListener() {
            @Override
            public void buttonClick(Button.ClickEvent event) {
                addEmailToList(emailField.getValue());
            }
        });
        deleteFromListButton.addClickListener(new Button.ClickListener() {
            @Override
            public void buttonClick(Button.ClickEvent clickEvent) {
                select.getSelectedItem().ifPresent(selectedItem -> removeSelectedEmailFromList());

            }
        });
        select.addValueChangeListener(new HasValue.ValueChangeListener<String>() {
            @Override
            public void valueChange(HasValue.ValueChangeEvent<String> valueChangeEvent) {
                deleteFromListButton.setEnabled(select.getSelectedItem().isPresent());
            }
        });

        content.addComponents(emailField, addToListButton, select, deleteFromListButton);

        addComponent(content);
    }

    private void addEmailToList(String email){
        dataProvider.getItems().add(email);
        select.getDataProvider().refreshAll();
        emailField.clear();
    }

    private void removeSelectedEmailFromList(){
        select.getSelectedItem().ifPresent(selectedItem -> dataProvider.getItems().remove(selectedItem));
        select.setSelectedItem(dataProvider.getItems().isEmpty() ? null : dataProvider.getItems().iterator().next());
        select.getDataProvider().refreshAll();
    }

}

It looks like the following:

Would that be a possible option for you?