mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
yamanerkam
ffcc8eee98
Several issues in the shared docs `Select` component (used by the API reference package filter): - The options list never scrolled: its element used a class with no styles, so the intended max-height/overflow rule was dead. Point it at the styled class so long lists scroll within the popover. - Selecting an option now closes the popup instead of leaving it open. - Clip the trigger and popover corners (overflow: hidden) so their rounded borders render cleanly, and align the popover width with the trigger. - Drop the selected-option checkmark. The component is single-select and already marks the selection with a highlight, so the tick was misleading. - Remove the unused `disabled` input.
88 lines
3.2 KiB
HTML
88 lines
3.2 KiB
HTML
<div ngCombobox #combobox="ngCombobox" class="docs-combobox-container" [(expanded)]="popupExpanded">
|
|
<div #origin class="docs-select-input-container">
|
|
<input
|
|
[attr.id]="id()"
|
|
[attr.name]="name()"
|
|
[value]="displayValue()"
|
|
placeholder="Select an option"
|
|
readonly
|
|
[tabindex]="-1"
|
|
/>
|
|
<span class="material-symbols-outlined docs-select-arrow" translate="no" aria-hidden="true"
|
|
>arrow_drop_down</span
|
|
>
|
|
</div>
|
|
|
|
<ng-template
|
|
[cdkConnectedOverlay]="{origin: combobox.element, usePopover: 'inline', matchWidth: true}"
|
|
[cdkConnectedOverlayOpen]="popupExpanded()"
|
|
[cdkConnectedOverlayDisableClose]="false"
|
|
(overlayOutsideClick)="popupExpanded.set(false)"
|
|
>
|
|
<ng-template ngComboboxPopup [combobox]="combobox" popupType="dialog">
|
|
<div class="docs-select-popover">
|
|
<div class="docs-select-dialog" ngComboboxWidget>
|
|
<div class="example-combobox-container">
|
|
<div class="docs-select-search-container">
|
|
<span
|
|
class="material-symbols-outlined docs-select-search-icon"
|
|
translate="no"
|
|
aria-hidden="true"
|
|
>search</span
|
|
>
|
|
<input
|
|
ngCombobox
|
|
#innerCombobox="ngCombobox"
|
|
#searchInput
|
|
class="docs-select-search-input"
|
|
placeholder="Search..."
|
|
[(value)]="searchString"
|
|
[alwaysExpanded]="true"
|
|
(keydown.escape)="onSearchEscape($event)"
|
|
/>
|
|
</div>
|
|
|
|
<div aria-live="polite" class="cdk-visually-hidden">
|
|
{{ filteredOptions().length === 0 ? 'No results found for ' + searchString() : '' }}
|
|
</div>
|
|
|
|
<ng-template ngComboboxPopup [combobox]="innerCombobox">
|
|
<div class="example-popup example-popup-no-margin">
|
|
@if (filteredOptions().length === 0) {
|
|
<div class="docs-select-no-results">No results found</div>
|
|
}
|
|
<div
|
|
#listbox="ngListbox"
|
|
ngListbox
|
|
[(value)]="selectedValues"
|
|
[multi]="false"
|
|
ngComboboxWidget
|
|
class="docs-select-listbox"
|
|
focusMode="activedescendant"
|
|
tabindex="-1"
|
|
selectionMode="explicit"
|
|
(click)="onCommit()"
|
|
(keydown.enter)="onCommit()"
|
|
[activeDescendant]="listbox.activeDescendant()"
|
|
[class.example-empty]="filteredOptions().length === 0"
|
|
>
|
|
@for (option of filteredOptions(); track option.value) {
|
|
<div
|
|
ngOption
|
|
[value]="option.value"
|
|
[label]="option.label"
|
|
class="docs-select-option"
|
|
>
|
|
<span class="docs-select-option-label">{{ option.label }}</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</ng-template>
|
|
</div>
|