Application hangs in browser when a form with 2 javascript components opens

Support
#1

I have a project with 2 custom javascript components - slider (from CUBA platform documentation) and jQuery-Timepicker-Addon (that uses jquery-ui sliders). When I open a form where both components are placed, application in browser hangs and doesn’t repair (F5, Ctrl-F5) until server restart.
The components work normal separately or both after form hot deploy, but form hangs again after server restart.

I tried webjars and/or simple copies of js libraries - no difference.
How can I make them work together?
Test project is attached.

jstest.zip (98.7 KB)

#3

Hi,

It seems that the issue is related to FieldGroup. In your project you can replace it with GridLayout:

<layout>
    <grid id="grid" spacing="true" width="100%">
        <columns>
            <column/>
            <column flex="1"/>
        </columns>
        <rows>
            <row>
                <label id="sliderLabel"/>
                <vbox id="sliderBox"/>
            </row>
            <row>
                <label id="dateTimePickerLabel" value="DateTimePicker"/>
                <vbox id="dateTimePickerBox"/>
            </row>
        </rows>
    </grid>
</layout>

public class JsComponents extends AbstractWindow {

    @Inject
    private VBoxLayout dateTimePickerBox;
    @Inject
    private VBoxLayout sliderBox;
    @Inject
    private Label sliderLabel;

    @Override
    public void ready() {
        SliderServerComponent slider = new SliderServerComponent();
        slider.setValue(new double[]{0.0, 100.0});
        slider.setMinValue(0);
        slider.setMaxValue(100);
        slider.setListener(newValue ->
                sliderLabel.setValue("" + newValue[0] + "/" + newValue[1]));
        slider.setWidth("80%");
        sliderBox.unwrap(Layout.class).addComponent(slider);

        DateTimePicker dateTimePicker = new DateTimePicker();
        dateTimePicker.setWidth("80%");
        dateTimePickerBox.unwrap(Layout.class).addComponent(dateTimePicker);
    }
}

I’ve created a GitHub issue.

Regards,
Gleb

#5

Thanks Gleb for your answer but I got absolutely the same result with your code - the form still hangs.
My OS is Windows 7 Pro.
In addition I can tell that when it happens Windows process “System” starts to consume more CPU resources for a time about 2-3 minutes.
The reason I’m trying the custom dateTimePicker component is inconvenience of time input in DateTime fields. If the CUBA component provided mouseclicking time input then I would not need all these.

#6

It appears so. But once the above code worked for me. I’ve added a comment to the issue on GitHub.

#7

It appears that both components work in CUBA Platform 7.x. I managed to use them on one form in CUBA Sampler application. But there is a bug: a slider handle is over dateTimePicker popup, but I think it’s not a CUBA problem.
image

Upd: I found that the problem is in the z-index css style parameter of dateTimePicker popup. If I assign z-index:4 (or >4) in browser console the popup is over any other form element. But I don’t know how to set this style parameter.

1 Like