Joomla-cms: [4.0] Showon doesn't work with radio button

[webchun]

Steps to reproduce the issue

I created these fields in my custom module backend as below :

 <field name="show_option" type="radio" default="0" label="Radio" description="Desc" class="btn-group btn-group-yesno">
      <option value="0">Hide</option>
      <option value="1">Show</option>
 </field>

 <field name="option_name" type="text" default="0" label="Text" description="Desc" showon="show_option:1"/>`

Expected result

When I choose 'show_option' to 'Show' the 'option_name' field will automatically be shown under the radio field.

Actual result

The 'option_name' field will only be shown after I save the form.

System information (as much as possible)

Joomla ‎‎4.0.0-beta1-dev.

Additional comments

[Bakual]

Can you try if it works without the class "btn-group" and "btn-grp-yesno"? Because I have a feeling it's related to that btn-grp stuff and not to the showon feature itself.

[richard67]

And please provide some system information. Right now we don't even know if this issue is for Joomla 3 or 4.

In Both Joomla 3 and 4 showon works in Global Configuration in backend. But the buttons are not HTML elements <field>, they are <input>.

[chmst]

Strange - but I have the same issue in J4, developing a new component.
The field definition works if I add it into the com_config/forms/application.xml,
but not in my own component where I wanted to use it in a edit form.
I use class="switcher" in J4.

        <field name="show_jury" 
               type="radio"
               default="1"
               label="xx" 
               class="switcher"
        >
            <option value="0">Hide</option>
            <option value="1">Show</option>
        </field>

        <field 
            name="jury" 
            type="text"  
            label="yy"
            showon="show_jury:1"
/>

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27555.

[N6REJ]

showon works fine in J3 with btngroup. I've suspected issues in J4 however

[webchun]

I'm sorry I forgot to include the system information. It's Joomla ‎4.0.0-alpha12

[alikon]

please use the nigthly builds https://developer.joomla.org/nightly-builds.html or the current 4.0-dev branch as alpha12 is quite old (oct 2019)

[infograf768]

        <field
            name="show_associations"
            type="radio"
            label="JGLOBAL_SHOW_ASSOCIATIONS_LABEL"
            class="switcher"
            default="0"
            >
            <option value="0">JHIDE</option>
            <option value="1">JSHOW</option>
        </field>

        <field
            name="flags"
            type="radio"
            label="JGLOBAL_SHOW_FLAG_LABEL"
            class="switcher"
            default="1"
            showon="show_associations:1"
            >
            <option value="0">JNO</option>
            <option value="1">JYES</option>
        </field>

works perfectly in articles config.

Works also fine in Language Switcher module.

[webchun]

Can you try if it works without the class "btn-group" and "btn-grp-yesno"? Because I have a feeling it's related to that btn-grp stuff and not to the showon feature itself.

I have updated my installation to ‎4.0.0-beta1-dev.
It works by using class="switcher" instead of class="btn-group btn-group-yesno". Is this the expected behavior?

[Quy]

Yes

[N6REJ]

@Quy are you saying you can't use btn-group btn-group-yesno when using showon?

[webchun]

yup, showon doesn't work withclass="btn-group btn-group-yesno" , but it works with class="switcher"

[N6REJ]

then this is a release blocker. There is no reason at all for ONLY switcher to work. Infact that class is not even in the docs!!!
btn-group has been a defacto class for years.
@Quy you need to reopen this.

[infograf768]

The class btn-group-yesno does not exist anymore in J4 as a lot of other stuff which are now obsolete.
I agree that docs should be updated, but there is no reason imho to re-open this Issue.

[Bakual]

The class btn-group-yesno does not exist anymore in J4 as a lot of other stuff which are now obsolete.

That's not true. btn-group-yesno works perfectly fine in J4.
And obviously, that should work with showon as well.
I'm reopening this issue.

[infograf768]

@Bakual
I greped for that class and I did not find it at all.

[Bakual]

Code is here: https://github.com/joomla/joomla-cms/blob/64b9025211b02d29be61ffe418f47e6334b8ed7b/layouts/joomla/form/field/radio/buttons.php#L44-L45

The styling itself uses regular features from Bootstrap. So you will not find that class in the CSS rules.

[Bakual]

The issue isn't related to the btn-group-yesno itself. It's related to the generic btn-group which is a regular feature from Bootstrap. So the showon JS code needs to take care of that I guess.

[C-Lodder]

It's just Bootsrap's data-toggle that's causing the issue.

Simply add:

elem.addEventListener('click', () => { self.linkedOptions(key); });

in here:

https://github.com/joomla/joomla-cms/blob/4.0-dev/build/media_source/system/js/showon.es6.js#L100

[Ruud68]

(part of the) issue is also that showon.js functionality is only loaded when the 'switcher' is created via a layout file set on the config parameter (layout="joomla.form.field.radio.switcher").
So manually setting the switcher class to your radio button will not work as the showon functionality (js) is not loaded / initialized on that radio button.
this breaks B/C for this functionality as adding that layout parameter to radio buttons will make it work in J4, but will break the complete configuration form in J3.
@C-Lodder tried your solution but that didn't do the trick :(

[nikosdion]

I can reproduce this issue on the released Joomla! 4.0 Beta 1.

This is indeed a release blocker because it's impossible to deliver different classes in the <config> section of a plugin, for example, depending on whether it runs under Joomla 3 or 4. As a 3PD my options are:

• Make the options look ugly to Joomla 3 users which is bad since it'll be supported until at least well into 2022.
• Make the options look ugly to Joomla 4 users which is bad since it gives the feeling that I don't care about how my extensions are presented.
• Remove the showon completely which is bad because it lends itself to a confusing user experience.
• Ship different packages for Joomla 3 and 4 which is bad because it leads to more work, creates an opportunity for bugs to slip in and creates a frustrating experience for the user trying to install my software through the Install from Web (either J3 or J4 users have to receive an error).

At this point I have to remove showon since it's the least problematic option but it still feel like I have to choose between cutting off a finger, my arm or my head.

[C-Lodder]

@Ruud68 the change proposed was for the build file. So you need to run npm i to compile the JS

[Ruud68]

@C-Lodder I added that line to the run time version (with the site in debug mode: so in the non-minified version), non of the eventlisteners got registered (other then de bootstrap ones)

[C-Lodder]

@Ruud68 I dont know what to say. Perhaps you're editing the .es6 file instead of the ES5 file.

As you can see, it works perfectly fine:

[Ruud68]

@C-Lodder looks good! Maybe do a PR for that change?
I didn't dive into the j4 dev environment, not a huge fan of building before I can test something. Will try to redo the change and test again. Had been trying a lot of things to find the root cause so probably messed up the installation :(

[Ruud68]

Okay, just tested change proposed by @C-Lodder again against a fresh installation and can confirm that this now works.
So the showon state of fields can now be toggled with radio field with class "switcher btn-group btn-group-yesno". So the same field config now works in both J3.9 as well as in J4.
@C-Lodder what is currently holding you back to create a PR for this? Do you expect any side effects? If you want I can create the PR for you. Just say the word :)

[C-Lodder]

Sure, go for it ;)

[wilsonge]

Added a release blocker tag tag

[Ruud68]

Sure, go for it ;)

Went for it :)

[wilsonge]

Closing as PR was merged