@sapudex/web-components 2.22.0 → 2.23.0

package/src/SelectBox.hbs

@@ -1,81 +1,123 @@
-<div class="udex-select-box__root">
+<div
+    class="{{_rootClass}}">
     <div class="udex-text-field__container">
-        <div class="udex-text-field__wrap">
-            <div
-                role="combobox"
-                @click="{{getHandleSingleSelectOpen}}"
-                class="udex-text-field__input"
-                @ui5-tag-icon-click="{{handleRemoveTag}}"
-                @keydown="{{handleKeyDownTrigger}}"
-                ?open="{{_open}}"
-                tabindex="{{effectiveTabIndex}}"
-                @focusin="{{handleFocusIn}}"
-                @focusout="{{handleFocusOut}}"
-                ?disabled="{{disabled}}"
-                ?displayonly="{{displayonly}}"
-                ?readonly="{{readonly}}"
-                aria-label="{{accInfo.ariaLabel}}"
-                aria-readonly="{{isReadOrDisplayOnly}}"
-                aria-disabled="{{disabled}}"
-                aria-haspopup="{{listboxRole}}"
-                aria-controls="{{popoverId}}"
-                aria-expanded="{{tokenizerExpanded}}"
-                aria-activedescendant>
-                {{#if label}}
-                    <span class="{{labelClass}}">
-                        {{label}}
-                        {{#if required}}
-                          *
-                        {{/if}}
-                        </span>
-                        <span class="hidden" id="{{this._id}}-single-label">{{accInfo.ariaLabel}}</span>
-                    </span>
-                {{/if}}
-                {{#if showSingleSelectedOption}}
-                    <div class="udex-text-field__text-holder">
-                        <span class="udex-text-field__single-label" aria-hidden="true">
-                            {{{_singleSelectedOption}}}
-                        </span>
-                    </div>
-                {{/if}}
-                {{#if showMultiSelectedOptions}}
-                    <udex-tag-group
-                        class="udex-tag-group"
-                        ?displayonly="{{displayonly}}"
-                        ?readonly="{{readonly}}"
-                        ?disabled="{{disabled}}"
-                        tooltip-placement="{{tooltipPlacement}}"
-                        @ui5-tag-click="{{handleTagClick}}"
-                        @ui5-show-more-tags="{{getHandlerShowMoreItems}}"
-                        @ui5-tag-keydown="{{handleKeyDownTag}}"
-                        ?expanded="{{tokenizerExpanded}}">
-                        {{#each selectedItems}}
-                            {{#unless this.isGroup}}
-                                <udex-tag
-                                    text="{{this.label}}"
-                                    id="{{this._id}}"
-                                    icon="decline">
-                                </udex-tag>
-                            {{/unless}}
-                        {{/each}}
-                    </udex-tag-group>
-                {{/if}}
-                {{#if showTrigger}}
-                    <button
-                        role="combobox"
-                        aria-labelledby="{{this._id}}-single-label"
-                        aria-expanded="{{accessibilityAttributes.expanded}}"
-                        aria-controls="{{accessibilityAttributes.controls}}"
-                        aria-haspopup="{{accessibilityAttributes.hasPopup}}"
+         <div class="udex-text-field__wrap" ?displayonly="{{displayonly}}">
+             {{#if showMultiSelectedOptions}}
+                 <udex-tag-group
+                     class="udex-tag-group"
+                     ?displayonly="{{displayonly}}"
+                     ?readonly="{{readonly}}"
+                     ?disabled="{{disabled}}"
+                     @focusout="{{resetTagsTabIndexes}}"
+                     tooltip-placement="{{tooltipPlacement}}"
+                     @ui5-tag-icon-click="{{handleRemoveTag}}"
+                     @ui5-tag-click="{{handleTagClick}}"
+                     @ui5-show-more-tags="{{handlerShowMoreItems}}"
+                     @ui5-tag-keydown="{{handleKeyDownTag}}"
+                     ?tokenizer-expanded="{{tokenizerExpanded}}"
+                     _skip-more-button-focus>
+                     {{#each selectedItems}}
+                         {{#unless this.isGroup}}
+                             <udex-tag
+                               text="{{this.label}}"
+                               id="{{this._id}}"
+                               icon="decline">
+                             </udex-tag>
+                         {{/unless}}
+                     {{/each}}
+                 </udex-tag-group>
+             {{/if}}
+              <div
+                  class="udex-text-field__input"
+                  @focusin="{{handleInputFocusIn}}"
+                  @focusout="{{handleInputFocusOut}}"
+                  ?readonly="{{readonly}}"
+                  ?disabled="{{isDisabled}}"
+                  ?open="{{_open}}">
+                  {{#if label}}
+                    <label for="search-input" class="{{labelClass}}">
+                      {{label}}
+                      {{#if required}}*{{/if}}
+                    </label>
+                    <span class="hidden" id="{{this._id}}-aria-describedby">{{ariaDescribedbyText}}</span>
+                  {{/if}}
+                  {{#if showImageFlags}}
+                      {{countryFlag}}
+                  {{/if}}
+                  <div class="udex-text-field__holder">
+                      <input
+                          role="combobox"
+                          type="text"
+                          id="search-input"
+                          name="search"
+                          class="udex-text-field__search"
+                          .value="{{_inputValue}}"
+                          @input="{{handleSearchChange}}"
+                          @click="{{handleInputClick}}"
+                          @keydown="{{handleKeyDownSearch}}"
+                          ?disabled="{{isDisabled}}"
+                          ?readonly="{{isReadOrDisplayOnly}}"
+                          aria-label="{{accInfo.ariaLabel}}"
+                          aria-readonly="{{isReadOrDisplayOnly}}"
+                          aria-disabled="{{disabled}}"
+                          aria-haspopup="{{listboxRole}}"
+                          aria-controls="{{popoverId}}"
+                          aria-expanded="{{this._open}}"
+                          aria-autocomplete="{{_ariaAutoComplete}}"
+                          aria-describedby="{{this._id}}-aria-describedby"
+                          autocomplete="off"
+                      />
+                      {{#if _selectedOption}}
+                          <div class="udex-text-field__text-holder">
+                              <span class="udex-text-field__single-label" aria-hidden="true">
+                                {{{_selectedOption}}}
+                              </span>
+                          </div>
+                      {{/if}}
+                  </div>
+                  {{#unless displayonly}}
+                      <button
+                        @click="{{handleButtonClick}}"
+                        ?disabled="{{isDisabled}}"
+                        aria-label="{{accInfo.ariaLabel}}"
                         class="udex-text-field__trigger"
-                        tabindex="{{triggerTabIndex}}"
-                        @keydown="{{handleKeyDownTrigger}}"
-                        @click="{{getHandleMultiSelectOpen}}">
-                        <ui5-icon name="navigation-down-arrow"></ui5-icon>
-                        <span class="hidden">{{accessibilityAttributes.ariaLabel}}</span>
-                    </button>
-                {{/if}}
-            </div>
+                        tabindex="-1">
+                        <ui5-icon mode="Decorative" name="navigation-down-arrow"></ui5-icon>
+                      </button>
+                  {{/unless}}
+                  <ui5-popover
+                      id="{{popoverId}}"
+                      ?allow-target-overlap="{{allowTargetOverlap}}"
+                      @keydown="{{handleKeyDownDropdown}}"
+                      @ui5-select-all="{{handleSelectAll}}"
+                      @ui5-item-press="{{handleItemPress}}"
+                      @ui5-header-press="{{handleHeaderPress}}"
+                      @ui5-before-open="{{handleDropdownBeforeOpen}}"
+                      @ui5-open="{{fireEventDropdownOpen}}"
+                      @ui5-before-close="{{handleDropdownBeforeClose}}"
+                      @ui5-close="{{handleDropdownClose}}"
+                      class="udex-select-box__dropdown"
+                      horizontal-align="Start"
+                      placement="Bottom"
+                      prevent-focus-restore
+                      prevent-initial-focus
+                      hide-arrow>
+                      {{#if _showTagsDropdownContent}}
+                          <div class="udex-truncatable-tag-content">
+                              <span class="udex-truncatable-tag-content__label">{{truncatableTagLabel}}</span>
+                              <ui5-icon
+                                  @click="{{handleRemoveTruncatableTag}}"
+                                  class="udex-truncatable-tag-content__icon"
+                                  mode="Decorative"
+                                  name="decline">
+                              </ui5-icon>
+                          </div>
+                      {{else}}
+                        {{searchableList}}
+                      {{/if}}
+                  </ui5-popover>
+                  <span aria-live="polite" aria-atomic="true" class="hidden">{{_accSearchResultInfo}}</span>
+                </div>
         </div>
         {{#if supportingText}}
             <udex-status-message
@@ -85,35 +127,4 @@
             </udex-status-message>
         {{/if}}
     </div>
-    <ui5-popover
-        hide-arrow
-        id="{{popoverId}}"
-        class="udex-select-box__dropdown"
-        ?allow-target-overlap="{{allowTargetOverlap}}"
-        @keydown="{{handleKeyDownDropdown}}"
-        @ui5-select-all="{{handleSelectAll}}"
-        @ui5-item-press="{{handleItemPress}}"
-        @ui5-header-press="{{handleHeaderPress}}"
-        @ui5-submit-search-value="{{handleSubmitSearch}}"
-        @ui5-handle-value-search="{{handleValueSearch}}"
-        @ui5-handle-value-reset="{{handleResetSearch}}"
-        @ui5-before-open="{{handleDropdownBeforeOpen}}"
-        @ui5-after-close="{{handleDropdownAfterClose}}"
-        @search-keydown="{{handleKeyDownSearch}}"
-        horizontal-align="Start"
-        placement="Bottom">
-        {{#if _showTagsDropdownContent}}
-            <div class="udex-truncatable-tag-content">
-                <span class="udex-truncatable-tag-content__label">{{truncatableTagLabel}}</span>
-                <ui5-icon
-                    @click="{{handleRemoveTruncatableTag}}"
-                    class="udex-truncatable-tag-content__icon"
-                    mode="Decorative"
-                    name="decline">
-                </ui5-icon>
-            </div>
-        {{else}}
-            {{searchableList}}
-        {{/if}}
-    </ui5-popover>
 </div>