Skip to content

Commit 5a5aa29

Browse files
nickschotnickschot
committed
Add wrapper div around options & afterOptionsComponent
1 parent 5b2b054 commit 5a5aa29

File tree

3 files changed

+89
-87
lines changed

3 files changed

+89
-87
lines changed

‎addon/components/power-select.hbs‎

Lines changed: 83 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,12 @@
5353
tabindex={{and (not @disabled) (or @tabindex "0")}}
5454
...attributes
5555
>
56-
{{#let
57-
(if
58-
@triggerComponent
59-
(component (ensure-safe-component @triggerComponent))
56+
{{#let
57+
(if
58+
@triggerComponent
59+
(component (ensure-safe-component @triggerComponent))
6060
(component 'power-select/trigger')
61-
)
61+
)
6262
as |Trigger|}}
6363
<Trigger
6464
@allowClear={{@allowClear}}
@@ -75,9 +75,9 @@
7575
@onInput={{this.handleInput}}
7676
@onKeydown={{this.handleKeydown}}
7777
@placeholder={{@placeholder}}
78-
@placeholderComponent={{if
79-
@placeholderComponent
80-
(ensure-safe-component @placeholderComponent)
78+
@placeholderComponent={{if
79+
@placeholderComponent
80+
(ensure-safe-component @placeholderComponent)
8181
(component 'power-select/placeholder')
8282
}}
8383
@ariaActiveDescendant={{concat publicAPI.uniqueId "-" this.highlightedIndex}}
@@ -90,12 +90,12 @@
9090
</dropdown.Trigger>
9191
<dropdown.Content class="ember-power-select-dropdown{{if publicAPI.isActive " ember-power-select-dropdown--active"}} {{@dropdownClass}}">
9292
{{#if (not-eq @beforeOptionsComponent null)}}
93-
{{#let
94-
(if
95-
@beforeOptionsComponent
93+
{{#let
94+
(if
95+
@beforeOptionsComponent
9696
(component (ensure-safe-component @beforeOptionsComponent))
9797
(component 'power-select/before-options')
98-
)
98+
)
9999
as |BeforeOptions|}}
100100
<BeforeOptions
101101
@select={{publicAPI}}
@@ -116,75 +116,77 @@
116116
/>
117117
{{/let}}
118118
{{/if}}
119-
{{#if this.mustShowSearchMessage}}
120-
{{#let
121-
(if
122-
@searchMessageComponent
123-
(component (ensure-safe-component @searchMessageComponent))
124-
(component 'power-select/search-message')
125-
)
126-
as |SearchMessage|}}
127-
<SearchMessage
128-
@searchMessage={{this.searchMessage}}
129-
@select={{publicAPI}}
130-
id={{listboxId}}
131-
aria-label={{@ariaLabel}}
132-
aria-labelledby={{@ariaLabelledBy}}
133-
/>
134-
{{/let}}
135-
{{else if this.mustShowNoMessages}}
136-
{{#let
137-
(if
138-
@noMatchesMessageComponent
139-
(component (ensure-safe-component @noMatchesMessageComponent))
140-
(component 'power-select/no-matches-message')
141-
)
142-
as |NoMatchesMessage|}}
143-
<NoMatchesMessage
144-
@noMatchesMessage={{this.noMatchesMessage}}
145-
@select={{publicAPI}}
146-
id={{listboxId}}
147-
aria-label={{@ariaLabel}}
148-
aria-labelledby={{@ariaLabelledBy}}
149-
/>
150-
{{/let}}
151-
{{else}}
152-
{{#let
153-
(if
154-
@optionsComponent
155-
(component (ensure-safe-component @optionsComponent))
156-
(component 'power-select/options')
157-
)
158-
(if
159-
@groupComponent
160-
(component (ensure-safe-component @groupComponent))
161-
(component 'power-select/power-select-group')
162-
)
163-
as |Options Group|}}
164-
<Options
165-
@loadingMessage={{or @loadingMessage "Loading options..."}}
166-
@select={{publicAPI}}
167-
@options={{publicAPI.results}}
168-
@groupIndex=""
169-
@optionsComponent={{Options}}
170-
@extra={{@extra}}
171-
@highlightOnHover={{this.highlightOnHover}}
172-
@groupComponent={{Group}}
173-
id={{listboxId}}
174-
class="ember-power-select-options" as |option select|>
175-
{{yield option select}}
176-
</Options>
177-
{{/let}}
178-
{{/if}}
179-
180-
{{#if @afterOptionsComponent}}
181-
{{#let (component (ensure-safe-component @afterOptionsComponent)) as |AfterOptions|}}
182-
<AfterOptions
183-
@extra={{@extra}}
184-
@select={{publicAPI}}
185-
/>
186-
{{/let}}
187-
{{/if}}
119+
<div class="ember-power-select-options-wrapper">
120+
{{#if this.mustShowSearchMessage}}
121+
{{#let
122+
(if
123+
@searchMessageComponent
124+
(component (ensure-safe-component @searchMessageComponent))
125+
(component 'power-select/search-message')
126+
)
127+
as |SearchMessage|}}
128+
<SearchMessage
129+
@searchMessage={{this.searchMessage}}
130+
@select={{publicAPI}}
131+
id={{listboxId}}
132+
aria-label={{@ariaLabel}}
133+
aria-labelledby={{@ariaLabelledBy}}
134+
/>
135+
{{/let}}
136+
{{else if this.mustShowNoMessages}}
137+
{{#let
138+
(if
139+
@noMatchesMessageComponent
140+
(component (ensure-safe-component @noMatchesMessageComponent))
141+
(component 'power-select/no-matches-message')
142+
)
143+
as |NoMatchesMessage|}}
144+
<NoMatchesMessage
145+
@noMatchesMessage={{this.noMatchesMessage}}
146+
@select={{publicAPI}}
147+
id={{listboxId}}
148+
aria-label={{@ariaLabel}}
149+
aria-labelledby={{@ariaLabelledBy}}
150+
/>
151+
{{/let}}
152+
{{else}}
153+
{{#let
154+
(if
155+
@optionsComponent
156+
(component (ensure-safe-component @optionsComponent))
157+
(component 'power-select/options')
158+
)
159+
(if
160+
@groupComponent
161+
(component (ensure-safe-component @groupComponent))
162+
(component 'power-select/power-select-group')
163+
)
164+
as |Options Group|}}
165+
<Options
166+
@loadingMessage={{or @loadingMessage "Loading options..."}}
167+
@select={{publicAPI}}
168+
@options={{publicAPI.results}}
169+
@groupIndex=""
170+
@optionsComponent={{Options}}
171+
@extra={{@extra}}
172+
@highlightOnHover={{this.highlightOnHover}}
173+
@groupComponent={{Group}}
174+
id={{listboxId}}
175+
class="ember-power-select-options" as |option select|>
176+
{{yield option select}}
177+
</Options>
178+
{{/let}}
179+
{{/if}}
180+
181+
{{#if @afterOptionsComponent}}
182+
{{#let (component (ensure-safe-component @afterOptionsComponent)) as |AfterOptions|}}
183+
<AfterOptions
184+
@extra={{@extra}}
185+
@select={{publicAPI}}
186+
/>
187+
{{/let}}
188+
{{/if}}
189+
</div>
188190
</dropdown.Content>
189191
{{/let}}
190192
</BasicDropdown>

‎tests/integration/components/power-select/a11y-test.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ module(
2525

2626
await clickTrigger();
2727
assert
28-
.dom('.ember-power-select-dropdown > .ember-power-select-options')
28+
.dom('.ember-power-select-dropdown > .ember-power-select-options-wrapper > .ember-power-select-options')
2929
.hasAttribute(
3030
'role',
3131
'listbox',
@@ -51,7 +51,7 @@ module(
5151

5252
await clickTrigger();
5353
assert
54-
.dom('.ember-power-select-dropdown > .ember-power-select-options')
54+
.dom('.ember-power-select-dropdown > .ember-power-select-options-wrapper > .ember-power-select-options')
5555
.hasAttribute(
5656
'role',
5757
'listbox',

‎tests/integration/components/power-select/groups-test.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,19 +30,19 @@ module(
3030
await clickTrigger();
3131

3232
let rootLevelGroups = document.querySelectorAll(
33-
'.ember-power-select-dropdown > .ember-power-select-options > .ember-power-select-group'
33+
' .ember-power-select-dropdown > .ember-power-select-options-wrapper > .ember-power-select-options > .ember-power-select-group'
3434
);
3535
let rootLevelOptions = document.querySelectorAll(
36-
'.ember-power-select-dropdown > .ember-power-select-options > .ember-power-select-option'
36+
' .ember-power-select-dropdown > .ember-power-select-options-wrapper > .ember-power-select-options > .ember-power-select-option'
3737
);
3838
assert
3939
.dom(
40-
'.ember-power-select-dropdown > .ember-power-select-options > .ember-power-select-group'
40+
' .ember-power-select-dropdown > .ember-power-select-options-wrapper > .ember-power-select-options > .ember-power-select-group'
4141
)
4242
.exists({ count: 3 }, 'There is 3 groups in the root level');
4343
assert
4444
.dom(
45-
'.ember-power-select-dropdown > .ember-power-select-options > .ember-power-select-option'
45+
' .ember-power-select-dropdown > .ember-power-select-options-wrapper > .ember-power-select-options > .ember-power-select-option'
4646
)
4747
.exists({ count: 2 }, 'There is 2 options in the root level');
4848
assert

0 commit comments

Comments
 (0)