Fieldset are not toggleable

[arkhi]

Based on the Grav documentation about fieldset, they are toggleable, which means they can be disabled, and when so, based on HTML5 specifications for the fieldset element, (almost) all the form controls that are descendants should be disabled too.

I hoped for this to happen but no luck on my side.

With the following code in a file user/themes/myTheme/blueprints/modular/default.yaml:

title: Default
'@extends':
    type: default
    context: blueprints://pages

child_type: item

form:
  fields:
    tabs:
      type: tabs
      active: 1

      fields:
        content:
          fields:
            header.fieldset:
              type: fieldset
              title: Fieldset
              toggleable: true
              collapsible: false
              collapsed: false

              fields:
                header.example1:
                  type: select
                  label: Example 1
                  classes: fancy
                  default: 1
                  options:
                    1: 1
                    2: 2
                header.example2:
                  type: select
                  label: Example 2
                  classes: fancy
                  default: 1
                  options:
                    1: 1
                    2: 2

I have the following rendering:

The following DOM tree is visible in the DOM Inspector (with a little beautifying):

<div class="form-fieldset">
    <input type="checkbox" class="hidden" id="fieldset_collapsible_header.fieldset" checked="checked">

    <div class="form-label form-fieldset--label">
        <h2>
            <label>Fieldset <span class="actions"></span></label>
        </h2>
    </div>
    <div class="form-data">
        <div class="form-field grid  ">
            <div class="form-label block size-1-3">
                <label>Example 1</label>
            </div>
            <div class="form-data block size-2-3" data-grav-selectize="[]" data-grav-field="select" data-grav-disabled="" data-grav-default="1">
                <div class="form-select-wrapper  ">
                    <select name="data[header][example1]" class="fancy  selectized" tabindex="-1" style="display: none;"><option value="1" selected="selected">1</option></select>
                    <div class="selectize-control fancy single plugin-required-fix">
                        <div class="selectize-input items full has-options has-items">
                            <div class="item" data-value="1">1</div><input type="select-one" autocomplete="off" tabindex="" style="width: 4px;"></div>
                        <div class="selectize-dropdown single fancy plugin-required-fix" style="display: none;">
                            <div class="selectize-dropdown-content"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-field grid  ">
            <div class="form-label block size-1-3">
                <label>Example 2</label>
            </div>
            <div class="form-data block size-2-3" data-grav-selectize="[]" data-grav-field="select" data-grav-disabled="" data-grav-default="1">
                <div class="form-select-wrapper  ">
                    <select name="data[header][example2]" class="fancy  selectized" tabindex="-1" style="display: none;"><option value="1" selected="selected">1</option></select>
                    <div class="selectize-control fancy single plugin-required-fix">
                        <div class="selectize-input items full has-options has-items">
                            <div class="item" data-value="1">1</div><input type="select-one" autocomplete="off" tabindex="" style="width: 4px;"></div>
                        <div class="selectize-dropdown single fancy plugin-required-fix" style="display: none;">
                            <div class="selectize-dropdown-content"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

On Discord, Romarain mentioned the following, if that can help:

@arkhi The answer seems that all templates extends the field.html;twig, and can replace some blocks. In the case of fieldset.html.twig, it rewrite the "field" block, while other fields (like in the form plugin) rewrite only the "input" block. And when rewritting the "field" block, fieldset.html.twig doesn't copy the

               {% if field.toggleable %}
                    <span class="checkboxes toggleable" data-grav-field="toggleable" data-grav-field-name="{{ field_name }}">
                        <input type="checkbox"
                               id="toggleable_{{ field.name }}"
                               {% if toggleableChecked %}value="1"{% endif %}
                               name="toggleable_{{ field_name }}"
                               {% if toggleableChecked %}checked="checked"{% endif %}
                        >
                        <label for="toggleable_{{ field.name }}"></label>
                    </span>
                {% endif %}

so it's not there !

So my first intuition was correct : they didn't implemented it. The documentation is lying ! :broken_heart:

[Heraes-git]

^^ yep. I precise that the final conclusion was just humor, based on our long discussion. This being said, we confirmed that the documentation about fieldsets do indeed provide a wrong information. And we correlated the absence with a missing code.