p:selectOneRadion with layout="custom" and p:outputLabel as clickable element causes Javascript exceptions

[csd1]

Hello,
I am trying to create clickable blocks of elements using p:selectOneRadio with layout="custom" to select one of given options. So each radio would be represented by a block of elements, all clickable (including space between components inside block).

The result in future should look like this:


Because I would like the entire block to be clickable, I use p:ouptutLabel as a container for clickable content with for attribute properly set.

I started with showcase example for p:selectOneRadio with layout="custom" and altered it a bit:

Code: Select all

<p:outputPanel id="customPanel" style="margin-bottom:10px">
    <p:selectOneRadio id="customRadio" value="#{radioView.color}" layout="custom">
        <f:selectItem itemLabel="Red" itemValue="Red" />
        <f:selectItem itemLabel="Green" itemValue="Green" />
        <f:selectItem itemLabel="Blue" itemValue="Blue" />
    </p:selectOneRadio>
    
    <p:outputLabel for="opt1"> 
      <p:radioButton id="opt1" for="customRadio" itemIndex="0" />
      <h:outputLabel value="Red" />
      <p:spinner />
    </p:outputLabel>

    <p:outputLabel for="opt2">
      <p:radioButton id="opt2" for="customRadio" itemIndex="1" />
      <h:outputLabel value="Green" />
      <p:inputText />
    </p:outputLabel>

    <p:outputLabel for="opt3">
      <p:radioButton id="opt3" for="customRadio" itemIndex="2" />
      <h:outputLabel value="Blue" />
      <p:inputText />
    </p:outputLabel>
</p:outputPanel>

This code works and the elements are selected properly and value is written into model on form submit. The problem I have are Javascript errors in browser console generated on each click on p:outputLabel:

Code: Select all

jquery.js?ln=primefaces&v=6.1.6:3 Uncaught SyntaxError: Invalid regular expression: /(^|\.)selectOneRadio(\.|$)/: Stack overflow
    at RegExp.test (<anonymous>)
    at HTMLDivElement.dispatch (jquery.js?ln=primefaces&v=6.1.6:3)
    at HTMLDivElement.r.handle (jquery.js?ln=primefaces&v=6.1.6:3)
    at Object.trigger (jquery.js?ln=primefaces&v=6.1.6:4)
    at HTMLDivElement.<anonymous> (jquery.js?ln=primefaces&v=6.1.6:4)
    at Function.each (jquery.js?ln=primefaces&v=6.1.6:2)
    at n.fn.init.each (jquery.js?ln=primefaces&v=6.1.6:2)
    at n.fn.init.trigger (jquery.js?ln=primefaces&v=6.1.6:4)
    at HTMLLabelElement.<anonymous> (components.js?ln=primefaces&v=6.1.6:17)
    at HTMLLabelElement.dispatch (jquery.js?ln=primefaces&v=6.1.6:3)

I am using Primefaces 6.1.6 with Morjarra 2.2.15. Error in browser console is present both in Chrome an Firefox

Am I doing something wrong or is there any bug in Primefaces javascript?

Thanks in advance for your time!

Martin

[csd1]

Hello,
I figured out where the problem with StackOverflow is.

When I click for example on <h:outputLabel value="Red" />, the click event is propagated to surrounding <p:outputLabel for="opt1"> which triggers click event on the <p:radioButton id="opt1" for="customRadio" itemIndex="0" /> component (determined using for atrtribute on p:outputLabel). The radio itself performs what is needed and propagates the click event to surrounding <p:outputLabel for="opt1"> and here we go again... we have "infinity loop" here.

I would rephrase the original statement as follows:
When p:outoutLabel has some kind of input component in its child elements and you bind them together using for attribute, you end up in this "infinity loop".

Has anyone faced this issue? Should I create bug in github for this? @tandraschko?

Thanks,
Martin

[csd1]

I fixed this issue in my code using event.stopPropagation():

Code: Select all

<p:outputPanel id="customPanel" style="margin-bottom:10px">
    <p:selectOneRadio id="customRadio" value="#{radioView.color}" layout="custom">
        <f:selectItem itemLabel="Red" itemValue="Red" />
        <f:selectItem itemLabel="Green" itemValue="Green" />
        <f:selectItem itemLabel="Blue" itemValue="Blue" />
    </p:selectOneRadio>
    
    <p:outputLabel for="opt1"> 
      <p:radioButton id="opt1" for="customRadio" itemIndex="0" styleClass="stopPropagationSelectOneRadio"/>
      <h:outputLabel value="Red" />
      <p:spinner />
    </p:outputLabel>

    <p:outputLabel for="opt2">
      <p:radioButton id="opt2" for="customRadio" itemIndex="1" styleClass="stopPropagationSelectOneRadio"/>
      <h:outputLabel value="Green" />
      <p:inputText />
    </p:outputLabel>

    <p:outputLabel for="opt3">
      <p:radioButton id="opt3" for="customRadio" itemIndex="2" styleClass="stopPropagationSelectOneRadio"/>
      <h:outputLabel value="Blue" />
      <p:inputText />
    </p:outputLabel>
</p:outputPanel>

<script>
$(".stopPropagationSelectOneRadio").on('click.selectOneRadio', function(e) {        
  e.stopPropagation();        
});
</script>

Could something like this be done in PF javascript for event 'click.selectOneRadio' on radioButton and others?

[Melloware]

Nice solution to stopPropagation. That was probably the only thing that was going to fix it.

[csd1]

Could this be somehow implemented directly in PF? This could happen to any input component wrapped by p:outputLabel...

I see several options:
- Attribute on radioButton to stop propagation
- Detection of p:outputLabel connected via for attribute to input component and somehow "break the cycle" - for example introduce new event on radio that would be used only when invoked from p:outputLabel with for attribute and then somehow stop propagation?

Do you have any other ideas?

Thanks.

[mert.sincan]

Fixed for 6.2.16 and 7.0.