Fixed Disabler not working properly with single selection dropdown

[Snog]

Affected version

2.0.x

I don't know if this is a bug or not....

I have a template that generates this HTML...

<dl class="formRow formRow--noColon formRow--input">
    <dt>
        <div class="formRow-labelWrapper">
        <label class="formRow-label" for="_xfUid-12-1538766569"><div class="bbWrapper">Single Selection Dropdown</div></label></div>
    </dt>
    <dd>
        <select name="item23" class="input" id="_xfUid-12-1538766569">
            <option value="0">Choose one</option>
            <option value="1" data-xf-init="disabler" data-container="#conditional35-1" data-hide="true">Dropdown 1</option>
            <option value="2">Dropdown 2</option>
            <option value="3">Dropdown 3</option>
        </select>
    </dd>
</dl>


<div id="conditional35-1">
    <dl class="formRow formRow--noColon formRow--input">
        <dt>
            <div class="formRow-labelWrapper">
            <label class="formRow-label" for="_xfUid-13-1538766569"><div class="bbWrapper">Test For Dropdown</div></label></div>
        </dt>
        <dd>
            <div class="inputGroup inputGroup--numbers inputNumber" data-xf-init="number-box"><input type="number" pattern="\d*" class="input input--number js-numberBoxTextInput" value="0"  min="0" step="1" required="required" name="itemclo" id="_xfUid-13-1538766569" /></div>
        </dd>
    </dl>
</div>

The disabler properly hides the DIV until Dropdown 1 is selected.

But if you select any other selection after that, the DIV remains visible. I know with the radio type, if you select a different selection the div would be hidden. I would expect the same from a single selection dropdown.

Bug? Or is the disabler just not intended for use with single selection dropdowns?

 

[DragonByte Tech]

I'd probably use <xf:dependent> inside the <xf:option> tag rather than using a disabler like that.

This is how the Email Transport option does it:

<xf:option value="smtp" label="SMTP" data-hide="true">
        <xf:dependent>
            // The other options here
        </xf:dependent>
    </xf:option>

You get both the hiding and the disabling part, without any of the hassle.


Fillip

 

[Snog]

I'd probably use <xf:dependent> inside the <xf:option> tag rather than using a disabler like that.

This is how the Email Transport option does it:

<xf:option value="smtp" label="SMTP" data-hide="true">
        <xf:dependent>
            // The other options here
        </xf:dependent>
    </xf:option>

You get both the hiding and the disabling part, without any of the hassle.


Fillip

I think that would be fine if the "other options" were a fixed value. But the entire thing is dynamic and that might complicate things even more.

I'll take a look at it though. Thanks.

EDIT: On my first try, that doesn't work with a single selection dropdown.

 

[DragonByte Tech]

EDIT: On my first try, that doesn't work with a single selection dropdown.

That's why I recommended a radiorow instead of drop-downs, though I can see how radiorow would be sub-optimal if we're talking potentially hundreds of entries.

Might just have to resort to writing your own disabler handler that can be attached to the select box itself, and searches for the data-container attribute in the options tags, rather than expecting both the handler and the container to be on the same element.


Fillip

 

[Snog]

Yes, that is an option. But I'm hoping it's either a bug or an oversight in the built in disabler as I would prefer not to have to do that. All other use cases are working perfectly. It's just the dropdown that's questionable.

 

[XF Bug Bot]

Thank you for reporting this issue. The issue is now resolved and we are aiming to include that in a future XF release (2.0.12).

Change log:

Make Disabler system compatible with select options.

Any changes made as a result of this issue being resolved may not be rolled out here until later.