dialog + bootstrap dateTimeRangePicker appearance problem

Hi dear vaadin forum users! I have a problem with appearance of [dateTimeRangePicker]
(https://www.daterangepicker.com/) native component. Recently i created a thread to find out how to add this component to vaadin app. I reached result with appearance and value setting in simple vaadin view that extends VerticalLayout, but now i want to use this in dialog window and here I faced something that is hard to describe. Picker appear normally in dialog window, after press on text filed, but then it disallow to use it, after click on picker it just hides. I don’t understand where problem is and why it happens (I’m new in vaadin). Please help me to resolve this problem, if possible to use this component in dialog window.
I though that it might be because of focus, but again, no idea how to resolve it and where exactly problem is.
Here you can see source code:

@StyleSheet("https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css")
@JavaScript("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js")
@JavaScript("https://cdn.jsdelivr.net/momentjs/latest/moment.min.js")
@JavaScript("https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js")
public class AddTourForm extends Dialog {
    private GuideService guideService;
    private DriverService driverService;

    private Label headerLabel = new Label();

    private TextField title = new TextField();
    private TextArea description = new TextArea();
    private TextField date = new TextField("Date-time");
    private MultiselectComboBox<Guide> guides = new MultiselectComboBox<>();
    private MultiselectComboBox<Driver> drivers = new MultiselectComboBox<>();
    private FileBuffer buffer = new FileBuffer();
    private Upload upload = new Upload(buffer);

    protected final Button saveButton = new Button("save");
    protected final Button cancelButton = new Button("cancel");
    protected final Button deleteButton = new Button("delete");

    protected HorizontalLayout header = new HorizontalLayout(headerLabel);
    protected HorizontalLayout fieldsLayout1 = new HorizontalLayout(title, description);
    protected HorizontalLayout fieldsLayout2 = new HorizontalLayout(guides, drivers);
    protected HorizontalLayout fieldsLayout3 = new HorizontalLayout(date, upload);
    protected HorizontalLayout buttonsLayout = new HorizontalLayout(saveButton, cancelButton, deleteButton);

    protected VerticalLayout mainLayout = new VerticalLayout(header, fieldsLayout1, fieldsLayout3,
            fieldsLayout2, buttonsLayout);

    private Binder<Tour> binder = new BeanValidationBinder<>(Tour.class);

    public AddTourForm(boolean withDelete, String title, GuideService guideService, DriverService driverService) {
        this.guideService = guideService;
        this.driverService = driverService;

        if (!withDelete)
            deleteButton.setVisible(false);

        configHeader(title);
        configButtons();
        configComboBoxes();
        configFields();
        configLayouts();

        add(mainLayout);

        setCloseOnOutsideClick(false);
        setCloseOnEsc(true);

        setMinWidth("400px");
        setWidth("600px");
    }

    private void configHeader(String title) {
        headerLabel.setText(title);
        header.setFlexGrow(1, this.title);
        header.setAlignItems(FlexComponent.Alignment.CENTER);
    }

    private void configLayouts(){
        fieldsLayout1.setSizeFull();
        fieldsLayout2.setSizeFull();

        mainLayout.setAlignItems(FlexComponent.Alignment.CENTER);
    }

    private void configButtons(){
        cancelButton.addClickListener(e -> close());

        saveButton.addClickShortcut(Key.ENTER);
        saveButton.addThemeVariants(ButtonVariant.LUMO_SUCCESS);

        deleteButton.addClickShortcut(Key.DELETE);
        deleteButton.addThemeVariants(ButtonVariant.LUMO_ERROR);
        deleteButton.addClickListener(event -> {
            new MyConfirmDialog("Confirm dialog", "r u sure?", e -> {
                System.out.println("YAHOOO! Confirmed");
                close();
            }).open();
        });
    }

    private void configFields() {
        title.setLabel("Title");
        title.setSizeFull();

        description.setLabel("Description");
        description.setSizeFull();

        upload.addSucceededListener(event -> {
            System.out.println("FILE NAME: "+event.getFileName());
        });

        date.setSizeFull();
        date.setId("daterange");
    }

    private void configComboBoxes() {
        guides.setItems(guideService.getGuides());
        guides.setItemLabelGenerator(Guide::getFullName);
        guides.setClearButtonVisible(true);
        //guides.setCompactMode(true);
        guides.setPlaceholder("Choose guides");
        guides.setLabel("Appoint guides");
        guides.setSizeFull();

        drivers.setItems(driverService.getDrivers());
        drivers.setItemLabelGenerator(Driver::getFullName);
        drivers.setClearButtonVisible(true);
        drivers.setPlaceholder("Choose drivers");
        drivers.setLabel("Appoint drivers");
        drivers.setSizeFull();
    }

    @Override
    protected void onAttach(AttachEvent event) {
        super.onAttach(event);
        // executing JS should be avoided in constructor
        getElement().executeJs("$(function () {\n" +
                "    $('#daterange').daterangepicker({\n" +
                "        timePicker: true,\n" +
                "        timePicker24Hour: true,\n" +
                "        timePickerIncrement: 5,\n" +
                "        autoApply: true,\n" +
                "        cancelLabel: 'Clear'\n" +
                "    }, function (start, end, label) {\n" +
                "        const pattern = \"DD-MM-YYYY HH:mm\";\n" +
                "        $('#daterange').val(start.format(pattern)+'-'+end.format(pattern));\n" +
                "    }).focus();\n" +
                "}).focus();").then(e-> {
        });

    }

}

Here can be found full source code of the project to try it out: https://github.com/code-6/tourManager.git
To reproduce this behaviour navigate to http://localhost:9105/tours then press on “add” button (dialog will open), in dialog press on date field (date picker will open) and try to chose a date, it will hide.
In this example everything works as expected:

@Route("test/cdn")
@StyleSheet("https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css")
@JavaScript("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js")
@JavaScript("https://cdn.jsdelivr.net/momentjs/latest/moment.min.js")
@JavaScript("https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js")
//@JavaScript("./resources/static/js/test-jquery.js")
public class JqueryTestView extends VerticalLayout {
    private String value = "Test";
    public JqueryTestView() {
        H1 title = new H1("Test Page");
        TextField textField = new TextField("Date-time");
        textField.setMinWidth("285px");
        textField.setId("daterange");
        add(title, textField);
    }

    protected void onAttach(AttachEvent event) {
        super.onAttach(event);
        // executing JS should be avoided in constructor
        var elem = getElement();
        elem.executeJs("$(function () {\n" +
                "    $('#daterange').daterangepicker({\n" +
                "        timePicker: true,\n" +
                "        timePicker24Hour: true,\n" +
                "        timePickerIncrement: 5,\n" +
                "        autoApply: true,\n" +
                "        cancelLabel: 'Clear'\n" +
                "    }, function (start, end, label) {\n" +
                "        const pattern = \"DD-MM-YYYY HH:mm\";\n" +
                "        $('#daterange').val(start.format(pattern)+'-'+end.format(pattern));\n" +
                "    });\n" +
                "});").then(e-> {

        });
    }
    //"$('#daterange').find( \"input\" ).val(start.format('YYYY-MM-DD')+ ' ' +end.format('YYYY-MM-DD'))"+
}

P.S. if u noted anything wrong or low code quality please let me know where and how to make it better, thank for your time.
Update:
So I found reason of this behaviour, I inspected page with browser and put picker inside vaadin-dialog-overlay element. After that it works. Question now is how to do same in code? By using java or atleast javascript?