No Code Attached Yet
avatar boddunan
boddunan
6 Sep 2021

Steps to reproduce the issue

  1. Create a component with the config.xml
  2. Add a list field with multiple=true and layout="joomla.form.field.list-fancy-select". Example:
<field name="social_auth_providers" type="list" default="facebook,twitter,google" multiple="true" layout="joomla.form.field.list-fancy-select" label="Social" description="Social">
  <option value="facebook">Facebook</option>
  <option value="google">Google</option>
  <option value="twitter">Twitter</option>
  <option value="linkedin">LinkedIn</option>
</field>
  1. Add another field with showon attrbute. Example: showon="social_auth_providers:facebook" where social_auth_providers is the name of the list field. Example:
<field name="facebook_oauth_id" type="text" showon="social_auth_providers:facebook" label="Facebook" description="Facebook"/>

Expected result

The second field is shown when the option with the value facebook is selected in the list field.

Actual result

The second field is not shown

System information (as much as possible)

Joomla 4.0.2

Additional comments

This works fine in Joomla 3.10

avatar boddunan boddunan - open - 6 Sep 2021
avatar joomla-cms-bot joomla-cms-bot - change - 6 Sep 2021
Labels Added: No Code Attached Yet
avatar joomla-cms-bot joomla-cms-bot - labeled - 6 Sep 2021
avatar sozzled
sozzled - comment - 6 Sep 2021

Works for me with J! 4.0.2. Well, I've only tried it with the field type of radio not list.

avatar Bakual
Bakual - comment - 6 Sep 2021

Does it work if you remove the multiple="true"? I'm not sure it's supposed to work with multiple.

avatar boddunan
boddunan - comment - 6 Sep 2021

Joomla 4: It works when the list is single selection (no multiple=true), it does not work with multiple=true.
Joomla 3: Works for both

avatar Bakual
Bakual - comment - 6 Sep 2021

@Fedik @dgrammatiko Did any of you change the showon JS code for J4? Could that be the issue here?

avatar dgrammatiko
dgrammatiko - comment - 6 Sep 2021

Did any of you change the showon JS code for J4?

Yes, the showon is completely rewritten in J4 as vanilla JS (no jQuery) but I think the problem comes from the field, eg probably the choices.js part or the parent Custom Element. The first one I wrote the code for the other was @Fedik (I think, might be wrong)

avatar Fedik
Fedik - comment - 6 Sep 2021

@boddunan does it work if remove layout attribute? when use generic <select>

avatar boddunan
boddunan - comment - 6 Sep 2021

No, removing the layout attribute shows a multi-select list box. Selecting options does not show other fields.

avatar Fedik
Fedik - comment - 6 Sep 2021

thanks for checking,
so it seems the bug in shwoon js, need to look how it handle multiple values

avatar dgrammatiko
dgrammatiko - comment - 6 Sep 2021

If someone can test replacing this

// If checkbox or radio box the value is read from properties
if (originField.getAttribute('type') && ['checkbox', 'radio'].indexOf(originField.getAttribute('type').toLowerCase()) !== -1) {
if (!originField.checked) {
// Unchecked fields will return a blank and so always match
// a != condition so we skip them
return;
}
itemval = document.getElementById(originId).value;
} else {
// Select lists, text-area etc. Note that multiple-select list returns
// an Array here s0 we can always treat 'itemval' as an array
itemval = document.getElementById(originId).value;
// A multi-select <select> $field will return null when no elements are
// selected so we need to define itemval accordingly
if (itemval === null && originField.tagName.toLowerCase() === 'select') {
itemval = [];
}
}
with
(updated, it seems I don't even know the HTML elements anymore ?. Thanks @Fedik )

            // If checkbox or radio box the value is read from properties
            if (originField.getAttribute('type') && ['checkbox', 'radio'].includes(originField.getAttribute('type').toLowerCase())) {
              if (!originField.checked) {
                // Unchecked fields will return a blank and so always match
                // a != condition so we skip them
                return;
              }

              itemval = document.getElementById(originId).value;
            } else if (originField.nodeName === 'SELECT' && originField.multiple) {
              itemval = Array.from(originField.querySelectorAll('option:checked')).map(el => el.value);
            } else {
              // Select lists, text-area etc. Note that multiple-select list returns
              // an Array here s0 we can always treat 'itemval' as an array
              itemval = document.getElementById(originId).value;
              // A multi-select <select> $field  will return null when no elements are
              // selected so we need to define itemval accordingly
              if (itemval === null && originField.tagName.toLowerCase() === 'select') {
                itemval = [];
              }
            }

The solution should be either that or something similar (I can't test this atm)

avatar Fedik
Fedik - comment - 6 Sep 2021

that will not work, there no field type="select" ?
should be element.nodeName === 'SELECT'

avatar johnnymgo
johnnymgo - comment - 6 Sep 2021

Hello,
Today I came across the same problem. Showon in Joomla 4 doesn't work for field list when it has 'multiple' attribute (as mentioned before) and also doesn't work for field of type 'checkboxes'.

avatar Fedik Fedik - change - 1 Oct 2021
Title
[4.0] showon attribute in config files does not work
[4.0] showon attribute does not work on List field with multiple="true"
avatar Fedik Fedik - edited - 1 Oct 2021
avatar anibalsanchez
anibalsanchez - comment - 1 Oct 2021

Same issue here.

I almost submitted a new issue! I wrote this description:

Steps to reproduce the issue

  1. Check the banners config.xml: www/administrator/components/com_banners/config.xml
  2. The config has the fields save_history (radio) and history_limit (number) showon="save_history:1"
  3. When you go to the config form, you can enable "Enable Versions" and it shows the "Maximum Versions" associated field
  4. Change the save_history (radio) to save_history (list), type="list", it still works OK
  5. Remove the layout to save_history (list), layout="joomla.form.field.radio.switcher", it still works OK
  6. Add the multiple="true" to the save_history (list), the shown conditional field doesn't work.
		<field
			name="save_history"
			type="list"
			label="JGLOBAL_SAVE_HISTORY_OPTIONS_LABEL"
			default="0"
			multiple="true"
			>
			<option value="0">JNO</option>
			<option value="1">JYES</option>
		</field>

Expected result

The shownon behaviour must support the multiple attribute (as it worked before on Joomla 3)

Actual result

The shownon behaviour doesn't support the multiple attribute.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/35486.
avatar dgrammatiko
dgrammatiko - comment - 1 Oct 2021
avatar dgrammatiko
dgrammatiko - comment - 2 Oct 2021

Please test #35723

avatar anibalsanchez
anibalsanchez - comment - 2 Oct 2021

@dgrammatiko The comment was almost there. I was writing about the array name just when you submitted the PR. ;-)

avatar alikon alikon - change - 2 Oct 2021
Status New Closed
Closed_Date 0000-00-00 00:00:00 2021-10-02 09:34:58
Closed_By alikon
avatar alikon alikon - close - 2 Oct 2021
avatar alikon
alikon - comment - 2 Oct 2021

closing as we have a pr #35723

Add a Comment

Login with GitHub to post a comment