XF 2.2 disabler and <xf:dependent> not working inside menu dropdown

[Justis R]

The form works as expected outside of a menu, but when moved into my menu, the dependent fields stop working.

If data-hide is true on the toggle option, the child options will be both visible and disabled regardless of whether or not the option is selected.
I data-hide is on the toggle option, the child options will be hidden regardless of whether or not the option is selected.

I expect it may be a bug, but I also expect plenty of other people will have wanted to use a disabler in a menu before, so hopefully I'm either overlooking something or someone's got some suggestions for how to get around this?

Current code: (custom_range is the option that isn't disabling/enabling the child options)

Spoiler: Using data-xf-init="disabler"

<xf:macro name="date_filter" arg-filters="!" arg-period="!">
    <a class="filterBar-menuTrigger" data-xf-click="menu" role="button" tabindex="0" aria-expanded="true" aria-haspopup="true">{$period}</a>
    <div class="menu" data-menu="menu" aria-hidden="true">
        <div class="menu-content">
            <h4 class="menu-header">Date range</h4>
            <xf:radiorow name="period" value="{$filters.period}">
                <xf:option form="filterForm" value="past_thirty_days">{{ phrase('justis_pro_resources_past_thirty_days') }}</xf:option>
                <xf:option form="filterForm" value="last_month">{{ phrase('justis_pro_resources_last_month') }}</xf:option>
                <xf:option form="filterForm" value="last_three_months">{{ phrase('justis_pro_resources_last_three_months') }}</xf:option>
                <xf:option form="filterForm" value="this_year">{{ phrase('justis_pro_resources_this_year') }}</xf:option>
                <xf:option form="filterForm" value="last_year">{{ phrase('justis_pro_resources_last_year') }}</xf:option>
                <xf:option form="filterForm" value="all_time">{{ phrase('justis_pro_resources_all_time') }}</xf:option>
                <xf:option form="filterForm" value="custom_range"
                           data-xf-init="disabler" data-container="#js-customDateRange" data-hide="true">{{ phrase('justis_pro_resources_custom_range') }}</xf:option>
            </xf:radiorow>
            <div id="js-customDateRange">
                <xf:dateinputrow form="filterForm" name="start_date" label="{{ phrase('start_date') }}" value="{{ $filters.start_date ? '' : date($filters.start, 'Y-m-d') }}" />
                <xf:dateinputrow form="filterForm" name="end_date" label="{{ phrase('end_date') }}" value="{{ $filters.end_date ? '' : date($filters.end, 'Y-m-d') }}" />
            </div>
            <div class="menu-footer">
                <span class="menu-footer-controls">
                    <xf:button type="submit" form="filterForm" class="button--primary">{{ phrase('filter') }}</xf:button>
                </span>
            </div>
        </div>
    </div>
</xf:macro>

Spoiler: Tried using <xf:dependent>

<xf:macro name="date_filter" arg-filters="!" arg-period="!">
    <a class="filterBar-menuTrigger" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">{$period}</a>
    <div class="menu" data-menu="menu" aria-hidden="true">
        <div class="menu-content">
            <h4 class="menu-header">Date range</h4>
            <xf:radiorow name="period" value="{$filters.period}">
                <xf:option form="filterForm" value="past_thirty_days">{{ phrase('justis_pro_resources_past_thirty_days') }}</xf:option>
                <xf:option form="filterForm" value="last_month">{{ phrase('justis_pro_resources_last_month') }}</xf:option>
                <xf:option form="filterForm" value="last_three_months">{{ phrase('justis_pro_resources_last_three_months') }}</xf:option>
                <xf:option form="filterForm" value="this_year">{{ phrase('justis_pro_resources_this_year') }}</xf:option>
                <xf:option form="filterForm" value="last_year">{{ phrase('justis_pro_resources_last_year') }}</xf:option>
                <xf:option form="filterForm" value="all_time">{{ phrase('justis_pro_resources_all_time') }}</xf:option>
                <xf:option form="filterForm" value="custom_range" label="{{ phrase('justis_pro_resources_custom_range') }}" data-hide="false">
                    <xf:dependent>
                        <xf:dateinputrow form="filterForm" name="start_date" label="{{ phrase('start_date') }}" value="{{ $filters.start_date ? '' : date($filters.start, 'Y-m-d') }}" />
                        <xf:dateinputrow form="filterForm" name="end_date" label="{{ phrase('end_date') }}" value="{{ $filters.end_date ? '' : date($filters.end, 'Y-m-d') }}" />
                    </xf:dependent>
                </xf:option>
            </xf:radiorow>
            <div class="menu-footer">
                <span class="menu-footer-controls">
                    <xf:button type="submit" form="filterForm" class="button--primary">{{ phrase('filter') }}</xf:button>
                </span>
            </div>
        </div>
    </div>
</xf:macro>

And here's the form which contains the menus:

Spoiler: The form

<xf:form id="filterForm" action="{{ link('resources/market-place-dashboard/product-analytics') }}">
    <div class="block">
        <div class="block-container">
            <div class="block-body">
                <div class="block-filterBar block-filterBar--analytics">
                    <xf:macro template="justis_pro_resources_analytic_filters_macros" name="product_filter" arg-filters="{$filters}"/>
                    <xf:macro template="justis_pro_resources_analytic_filters_macros" name="date_filter" arg-filters="{$filters}" arg-period="{$period}"/>
                </div>
            </div>
        </div>
    </div>

    <div class="block">
        <div class="block-container">
            <div class="flex block-header">
                <span class="stat-heading">Sales chart</span>
                <xf:macro template="justis_pro_resources_analytic_filters_macros" name="graph_filter"/>
            </div>
            <div class="block-body">
                <div class="block-row">
                    <div data-xf-init="stats">
                        <script class="js-statsData" type="application/json">
                    {$data.sales|json|raw}
                        </script>
                        <script class="js-statsSeriesLabels" type="application/json">
                       {$displayTypesPhrased.sales|json|raw}
                        </script>
                        <div class="ct-chart ct-major-tenth js-statsChart"></div>
                        <ul class="ct-legend js-statsLegend"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</xf:form>

 

[Justis R]

Seems to be an issue caused due to the combination of the form and the menu with the menu content as a direct child. Switching to an href for the menu circumvents the issue although it's a bit of a pain in the ass.