[dropdown] Dropdown input does not activate on clicked label

[mvorisek]

Bug Report

Steps to reproduce

1. open https://dev.atk4.org/demos/form/form.php
2. click "Surname" and notice the related input field is focused and ready for keyboard input
3. do the same (click on label) for "Gender" and notice, the dropdown field is not focused

the relevant source code:

<div id="atk_layout_maestro_tabs_tabssubview_form_2" class="ui form">
  <form id="atk_layout_maestro_tabs_tabssubview_form_2_form"></form>
  <div class=" field atk-form-group">
    <div class="two fields">
      <div class=" field">
        <label for="_fb4c4c3e610296be96213c074526fdc4__ayout_form_layout_surname_input">Surname</label>
        <div id="_fb4c4c3e610296be96213c074526fdc4__ayout_form_layout_surname" class="ui input">
          <input form="atk_layout_maestro_tabs_tabssubview_form_2_form" name="surname" type="text" placeholder="" id="_fb4c4c3e610296be96213c074526fdc4__ayout_form_layout_surname_input" value="">
        </div>
      </div>
      <div class=" field">
        <label for="_47e7cdfa5fd4dfd808d63e47e0a9b136__layout_form_layout_gender_input">Gender</label>
        <div id="_47e7cdfa5fd4dfd808d63e47e0a9b136__layout_form_layout_gender" class="ui input">
          <div class="ui dropdown  search selection " style="width: 100%;">
            <input form="atk_layout_maestro_tabs_tabssubview_form_2_form" name="gender" type="hidden" id="_47e7cdfa5fd4dfd808d63e47e0a9b136__layout_form_layout_gender_input" value="">
            <i class="dropdown icon"></i>
            <input form="atk_layout_maestro_tabs_tabssubview_form_2_form" class="search" style="width: 100%;">
            <div class="default text"></div>
            <div class="menu">
              <div class="item" data-value=""></div>
              <div class="item" data-value="0">Female</div>
              <div class="item" data-value="1">Male</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

When a form label is clicked the focus is normally transfered to the "connected" input. Dropdown is a little special, the data field is hidden and the input field is some other field.

Can the hidden input focus forward the focus event to the dropdown input field?

This is quite important for a component design as the label generator (which generated the for label's attribute) is not aware of the dropdown code, thus I would be happy if Fomantic-UI can redirect the focus with some code on Fomantic-UI Dropdown init.

[lubber-de]

As of HTML spec, the "for" attribute on labels does only work with form inputs. As FUI dropdown (especially the non-search variant) does not have a (visible) form input this is not going to work out of the box. We would need to fetch the click event on labels to support that... 🤔

https://stackoverflow.com/questions/11705956/can-the-label-tags-for-attribute-be-associated-with-a-normal-div