Enclosing the entire field within the <label> results in problems when the field is large and when the field contains multiple interactive elements. Clicking within interactive elements of a complex field triggers the <label>, refocusing the first input element. If the field is large, the <label> will contain empty space which also refocuses the input field upon being clicked, despite appearing to be the background of the page.
16 lines
528 B
HTML
16 lines
528 B
HTML
<div class="time-zone-field">
|
|
|
|
<!-- Available time zone regions -->
|
|
<select class="time-zone-region"
|
|
ng-attr-id="{{ fieldId }}"
|
|
ng-model="region"
|
|
ng-options="name for name in regions | orderBy: name"></select>
|
|
|
|
<!-- Time zones within selected region -->
|
|
<select class="time-zone"
|
|
ng-disabled="!region"
|
|
ng-model="model"
|
|
ng-options="timeZone.value as timeZone.key for timeZone in timeZones[region] | toArray | orderBy: key"></select>
|
|
|
|
</div>
|