Is there an existing way to add "Accept" "Cancel" floating buttons to a field?

Use case:

  1. User clicks on a read-only field.
  2. The field switches to be a editable field.
  3. The field shows floating “Accept” “Cancel” buttons at the bottom right corner.
  4. User makes changes to the field.
    5.1. User clicks on “Accept” button.
    5.1.1. The field updates its value and sends “Updated Event”.
    5.1.2. The field switches back to read-only.
    5.2. User clicks on “Cancel” button.
    5.2.1. The field reverts to the previous value.
    5.2.2. The field switches back to read-only.

See the example attached.

No, but should be possible with a simple layout where the buttons are right aligned below the field.

@quirky-zebra it’s a good idea. Ideally those button should be floating above other compoents. Having them inside a layout will push things below the field.

@observant-quetzal
Use helpercomponent . Create a horizontal layout with btns, make it hidden or visible as your need .

Textfiled.setHelperComponent(Layout)

@charming-frog in the practical case the field already has a helper.

With proper CSS, the buttons won’t interfere with the other components. The should be easily done with relative / absolute positioning of layout / buttons

use FlexLayout then

Or in your case, I would use a different approach : add the save/canel btns to as Suffix to the text field.

show them on enabled and hide on readony

readonly

I was thinking about it. It ads changes to the field width. Also, it’s not pretty in case of TextBox. I’m still hopedul of getting the drop-down look and feel. Cold be worth trying a combination of a suffix and a CSS to put the suffix underneath and above the field?

If your goal is to have them at the bottom the field like in the picture you shared. then No.

public class EditableTextField extends TextField {

public EditableTextField() {
    setReadOnly(true);
    setWidth("300px");
    HorizontalLayout hl = new HorizontalLayout();
    hl.setWidthFull();
    hl.setPadding(false);

    Div leftSide = new Div();
    Button attach = new Button(LineAwesomeIcon.CLIPBOARD.create());
    attach.addThemeVariants(ButtonVariant.LUMO_ICON);
    Button subTask = new Button(LineAwesomeIcon.TASKS_SOLID.create());
    subTask.addThemeVariants(ButtonVariant.LUMO_ICON);
    leftSide.add(attach,subTask);

    Div saveClose = new Div();
    Button save = new Button(LineAwesomeIcon.SAVE.create());
    save.addThemeVariants(ButtonVariant.LUMO_ICON);
    Button close = new Button(LineAwesomeIcon.TRASH_ALT.create());
    close.addThemeVariants(ButtonVariant.LUMO_ICON);
    saveClose.add(save,close);

    hl.setJustifyContentMode(FlexComponent.JustifyContentMode.BETWEEN);
    hl.add(leftSide,saveClose);

    setHelperComponent(hl);
    saveClose.setVisible(false);
    getElement().addEventListener("dblclick", (DomEventListener) event -> {
            if (isReadOnly()) {
                setReadOnly(false);
                saveClose.setVisible(true);
            } else {
                setReadOnly(true);
                saveClose.setVisible(false);
            }
    });

}

}

@observant-quetzal just to give you direction to my opinion

@charming-frog thank you for the ideas!