Context:
We are migrating our project from Axon Ivy 6.3 to Axon Ivy 8. In Axon Ivy 6.3, we use Primefaces 6, and in Axon Ivy 8, we use Primefaces 7.
We have our project with Axon Ivy 6.3 running on our staging server, the glitch issue doesn't happen there. However, on our dev server, where the Axon Ivy project version 8 is running, the issue happens.
So I guess it has something to do with the version of Primefaces.
Here is some of the code that we're using, I hope this can provide enough information.
We have custom numberSlider
component, which contains an input field and a <p:slider>
.
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:cc="http://xmlns.jcp.org/jsf/composite"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<cc:interface>
<cc:attribute name="value" required="true"/>
<cc:attribute name="componentId" required="true" type="java.lang.String"/>
<cc:attribute name="minValue" default="0"/>
<cc:attribute name="maxValue" default="100"/>
<cc:attribute name="step" default="1"/>
<cc:attribute name="label" type="java.lang.String"/>
<cc:attribute name="inputStyleClass" type="java.lang.String"/>
<cc:attribute name="widgetVar" type="java.lang.String"/>
<cc:editableValueHolder name="input" targets="#{cc.attrs.componentId}Input" />
<cc:clientBehavior name="slideEnd" targets="#{cc.attrs.componentId}Slider" event="slideEnd" />
<cc:clientBehavior name="inputChange" targets="#{cc.attrs.componentId}Input" event="change" />
</cc:interface>
<cc:implementation>
<h:outputScript name="numberslider.js?v=#{cachedVersion}" library="js" target="head"/>
<h:outputStylesheet library="css" name="componentnumber.slider.min.css?v=#{cachedVersion}"/>
<p:outputLabel value="#{cc.attrs.label}" for="#{cc.attrs.componentId}Input" styleClass="c-blue label"/>
<p:inputNumber id="#{cc.attrs.componentId}Input" value="#{cc.attrs.value}"
styleClass="input #{cc.attrs.inputStyleClass}" decimalPlaces="0" thousandSeparator="'" minValue="0" maxValue="2000000">
</p:inputNumber>
<p:message for="#{cc.attrs.componentId}Input" id="#{cc.attrs.componentId}InputMessage"/>
<div class="spacing-small"></div>
<div class="range">
<p:outputPanel styleClass="slider__tooltipBlock">
<i class="arrow-up"></i>
<p:outputLabel styleClass="slider__tooltipLabel" id="#{cc.attrs.componentId}SliderTooltipLabel" value="#{cc.attrs.value}">
<f:convertNumber type="number" locale="de_CH"/>
</p:outputLabel>
</p:outputPanel>
<p:slider id="#{cc.attrs.componentId}Slider" widgetVar="#{cc.attrs.widgetVar}" styleClass="slider__line"
for="#{cc.attrs.componentId}Input"
step="#{cc.attrs.step}" maxValue="#{cc.attrs.maxValue}" minValue="#{cc.attrs.minValue}"
display="#{cc.attrs.componentId}SliderTooltipLabel">
</p:slider>
<script type="text/javascript">
$(document).ready(function(){
MF.component.numberSlider.initSliderToolTip('#{cc.attrs.widgetVar}');
})
</script>
</div>
</cc:implementation>
</ui:composition>
And this is the way we use that component:
<div class="column medium-6">
<com:numberSlider id="amount" componentId="amount" value="#{tranche.amount}"
label="#{ivy.cms.co('/xx/xxx/xxx/xx/component/product/tranches/amount')}"
minValue="0" maxValue="2000000" step="50000" widgetVar="amountSlider#{varStatus.index}">
<p:ajax event="inputChange" listener="#{logic.onInputChange(varStatus.index)}"
partialSubmit="true"
update="@([id$='productVariant']) @([id$='flexibilityPanel']) @([id$='houseOverlayDataVariant']) @([id$='houseOverlayData'])"
process="@([id$='productVariant'])"
oncomplete="updateProductPageElementsHeight(); bindEventListenerForRangeSlider(); bindEventListenerForToogleHouse();"/>
<p:ajax event="slideEnd" listener="#{logic.onInputChange(varStatus.index)}"
partialSubmit="true"
update="@([id$='productVariant']) @([id$='flexibilityPanel']) @([id$='houseOverlayDataVariant']) @([id$='houseOverlayData'])"
process="@([id$='productVariant'])"
oncomplete="updateProductPageElementsHeight(); bindEventListenerForRangeSlider(); bindEventListenerForToogleHouse()"/>
</com:numberSlider>
</div>
Behavior
When we drag and drop the slider on staging, then release the mouse, the UI is updated smoothly.
When we drag and drop the slider on dev, then release the mouse, the UI has one glitch, the slider disappears and then reappears quickly. Some CSS has not been applied first when the glitch happens, then when the slider appears again, the CSS then applied correctly.
I expect the UI get changed the same way on both two versions.