Skip to content

Commit d98a480

Browse files
JoaoFerreira-FrontEndJoaoFerreira-FrontEnd
committed
- guarantee focusVisibleElement is called on all interfaces;
- change test page so all select have scroll;
1 parent 0617123 commit d98a480

File tree

2 files changed

+157
-49
lines changed

2 files changed

+157
-49
lines changed

‎core/src/components/select/select.tsx‎

Lines changed: 45 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -335,61 +335,57 @@ export class Select implements ComponentInterface {
335335

336336
await overlay.present();
337337

338-
// focus selected option for popovers and modals
339-
if (this.interface === 'popover' || this.interface === 'modal') {
340-
const indexOfSelected = this.childOpts.findIndex((o) => o.value === this.value);
341-
342-
if (indexOfSelected > -1) {
343-
const selectedItem = overlay.querySelector<HTMLElement>(
344-
`.select-interface-option:nth-child(${indexOfSelected + 1})`
345-
);
346-
347-
if (selectedItem) {
348-
/**
349-
* Browsers such as Firefox do not
350-
* correctly delegate focus when manually
351-
* focusing an element with delegatesFocus.
352-
* We work around this by manually focusing
353-
* the interactive element.
354-
* ion-radio and ion-checkbox are the only
355-
* elements that ion-select-popover uses, so
356-
* we only need to worry about those two components
357-
* when focusing.
358-
*/
359-
const interactiveEl = selectedItem.querySelector<HTMLElement>('ion-radio, ion-checkbox') as
360-
| HTMLIonRadioElement
361-
| HTMLIonCheckboxElement
362-
| null;
363-
if (interactiveEl) {
364-
// Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
365-
// and removing `ion-focused` style
366-
interactiveEl.setFocus();
367-
}
338+
const indexOfSelected = this.childOpts.findIndex((o) => o.value === this.value);
339+
if (indexOfSelected > -1) {
340+
const selectedItem = overlay.querySelector<HTMLElement>(
341+
`.select-interface-option:nth-child(${indexOfSelected + 1})`
342+
);
368343

369-
focusVisibleElement(selectedItem);
370-
}
371-
} else {
344+
if (selectedItem) {
372345
/**
373-
* If no value is set then focus the first enabled option.
346+
* Browsers such as Firefox do not
347+
* correctly delegate focus when manually
348+
* focusing an element with delegatesFocus.
349+
* We work around this by manually focusing
350+
* the interactive element.
351+
* ion-radio and ion-checkbox are the only
352+
* elements that ion-select-popover uses, so
353+
* we only need to worry about those two components
354+
* when focusing.
374355
*/
375-
const firstEnabledOption = overlay.querySelector<HTMLElement>(
376-
'ion-radio:not(.radio-disabled), ion-checkbox:not(.checkbox-disabled)'
377-
) as HTMLIonRadioElement | HTMLIonCheckboxElement | null;
378-
379-
if (firstEnabledOption) {
380-
/**
381-
* Focus the option for the same reason as we do above.
382-
*
383-
* Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
384-
* and removing `ion-focused` style
385-
*/
386-
firstEnabledOption.setFocus();
387-
388-
focusVisibleElement(firstEnabledOption.closest('ion-item')!);
356+
const interactiveEl = selectedItem.querySelector<HTMLElement>('ion-radio, ion-checkbox') as
357+
| HTMLIonRadioElement
358+
| HTMLIonCheckboxElement
359+
| null;
360+
if (interactiveEl) {
361+
// Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
362+
// and removing `ion-focused` style
363+
interactiveEl.setFocus();
389364
}
365+
366+
focusVisibleElement(selectedItem);
390367
}
391-
}
368+
} else {
369+
/**
370+
* If no value is set then focus the first enabled option.
371+
*/
372+
const firstEnabledOption = overlay.querySelector<HTMLElement>(
373+
'ion-radio:not(.radio-disabled), ion-checkbox:not(.checkbox-disabled)'
374+
) as HTMLIonRadioElement | HTMLIonCheckboxElement | null;
375+
376+
if (firstEnabledOption) {
377+
/**
378+
* Focus the option for the same reason as we do above.
379+
*
380+
* Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
381+
* and removing `ion-focused` style
382+
*/
383+
firstEnabledOption.setFocus();
392384

385+
focusVisibleElement(firstEnabledOption.closest('ion-item')!);
386+
}
387+
}
388+
393389
return overlay;
394390
}
395391

‎core/src/components/select/test/basic/index.html‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,18 @@
3333
<ion-select-option value="apples">Apples</ion-select-option>
3434
<ion-select-option value="oranges">Oranges</ion-select-option>
3535
<ion-select-option value="pears">Pears</ion-select-option>
36+
<ion-select-option value="pineaple">Pineaple</ion-select-option>
37+
<ion-select-option value="peach">Peach</ion-select-option>
38+
<ion-select-option value="melon">Melon</ion-select-option>
39+
<ion-select-option value="watermelon">Watermelon</ion-select-option>
40+
<ion-select-option value="strawberry">Strawberry</ion-select-option>
41+
<ion-select-option value="grapes">Grapes</ion-select-option>
42+
<ion-select-option value="banana">Banana</ion-select-option>
43+
<ion-select-option value="mango">Mango</ion-select-option>
44+
<ion-select-option value="dragonfruit">Dragonfruit</ion-select-option>
45+
<ion-select-option value="kiwi">Kiwi</ion-select-option>
46+
<ion-select-option value="blackberry">Blackberry</ion-select-option>
47+
<ion-select-option value="blueberry">Blueberry</ion-select-option>
3648
</ion-select>
3749
</ion-item>
3850

@@ -41,6 +53,50 @@
4153
<ion-select-option value="apples">Apples</ion-select-option>
4254
<ion-select-option value="oranges">Oranges</ion-select-option>
4355
<ion-select-option value="pears">Pears</ion-select-option>
56+
<ion-select-option value="pineaple">Pineaple</ion-select-option>
57+
<ion-select-option value="peach">Peach</ion-select-option>
58+
<ion-select-option value="melon">Melon</ion-select-option>
59+
<ion-select-option value="watermelon">Watermelon</ion-select-option>
60+
<ion-select-option value="strawberry">Strawberry</ion-select-option>
61+
<ion-select-option value="grapes">Grapes</ion-select-option>
62+
<ion-select-option value="banana">Banana</ion-select-option>
63+
<ion-select-option value="mango">Mango</ion-select-option>
64+
<ion-select-option value="dragonfruit">Dragonfruit</ion-select-option>
65+
<ion-select-option value="kiwi">Kiwi</ion-select-option>
66+
<ion-select-option value="blackberry">Blackberry</ion-select-option>
67+
<ion-select-option value="blueberry">Blueberry</ion-select-option>
68+
69+
<ion-select-option value="1apples">Apples</ion-select-option>
70+
<ion-select-option value="1oranges">Oranges</ion-select-option>
71+
<ion-select-option value="1pears">Pears</ion-select-option>
72+
<ion-select-option value="1pineaple">Pineaple</ion-select-option>
73+
<ion-select-option value="1peach">Peach</ion-select-option>
74+
<ion-select-option value="1melon">Melon</ion-select-option>
75+
<ion-select-option value="1watermelon">Watermelon</ion-select-option>
76+
<ion-select-option value="1strawberry">Strawberry</ion-select-option>
77+
<ion-select-option value="1grapes">Grapes</ion-select-option>
78+
<ion-select-option value="1banana">Banana</ion-select-option>
79+
<ion-select-option value="1mango">Mango</ion-select-option>
80+
<ion-select-option value="1dragonfruit">Dragonfruit</ion-select-option>
81+
<ion-select-option value="1kiwi">Kiwi</ion-select-option>
82+
<ion-select-option value="1blackberry">Blackberry</ion-select-option>
83+
<ion-select-option value="1blueberry">Blueberry</ion-select-option>
84+
85+
<ion-select-option value="2apples">Apples</ion-select-option>
86+
<ion-select-option value="2oranges">Oranges</ion-select-option>
87+
<ion-select-option value="2pears">Pears</ion-select-option>
88+
<ion-select-option value="2pineaple">Pineaple</ion-select-option>
89+
<ion-select-option value="2peach">Peach</ion-select-option>
90+
<ion-select-option value="2melon">Melon</ion-select-option>
91+
<ion-select-option value="2watermelon">Watermelon</ion-select-option>
92+
<ion-select-option value="2strawberry">Strawberry</ion-select-option>
93+
<ion-select-option value="2grapes">Grapes</ion-select-option>
94+
<ion-select-option value="2banana">Banana</ion-select-option>
95+
<ion-select-option value="2mango">Mango</ion-select-option>
96+
<ion-select-option value="2dragonfruit">Dragonfruit</ion-select-option>
97+
<ion-select-option value="2kiwi">Kiwi</ion-select-option>
98+
<ion-select-option value="2blackberry">Blackberry</ion-select-option>
99+
<ion-select-option value="2blueberry">Blueberry</ion-select-option>
44100
</ion-select>
45101
</ion-item>
46102

@@ -49,6 +105,50 @@
49105
<ion-select-option value="apples">Apples</ion-select-option>
50106
<ion-select-option value="oranges">Oranges</ion-select-option>
51107
<ion-select-option value="pears">Pears</ion-select-option>
108+
<ion-select-option value="pineaple">Pineaple</ion-select-option>
109+
<ion-select-option value="peach">Peach</ion-select-option>
110+
<ion-select-option value="melon">Melon</ion-select-option>
111+
<ion-select-option value="watermelon">Watermelon</ion-select-option>
112+
<ion-select-option value="strawberry">Strawberry</ion-select-option>
113+
<ion-select-option value="grapes">Grapes</ion-select-option>
114+
<ion-select-option value="banana">Banana</ion-select-option>
115+
<ion-select-option value="mango">Mango</ion-select-option>
116+
<ion-select-option value="dragonfruit">Dragonfruit</ion-select-option>
117+
<ion-select-option value="kiwi">Kiwi</ion-select-option>
118+
<ion-select-option value="blackberry">Blackberry</ion-select-option>
119+
<ion-select-option value="blueberry">Blueberry</ion-select-option>
120+
121+
<ion-select-option value="1apples">Apples</ion-select-option>
122+
<ion-select-option value="1oranges">Oranges</ion-select-option>
123+
<ion-select-option value="1pears">Pears</ion-select-option>
124+
<ion-select-option value="1pineaple">Pineaple</ion-select-option>
125+
<ion-select-option value="1peach">Peach</ion-select-option>
126+
<ion-select-option value="1melon">Melon</ion-select-option>
127+
<ion-select-option value="1watermelon">Watermelon</ion-select-option>
128+
<ion-select-option value="1strawberry">Strawberry</ion-select-option>
129+
<ion-select-option value="1grapes">Grapes</ion-select-option>
130+
<ion-select-option value="1banana">Banana</ion-select-option>
131+
<ion-select-option value="1mango">Mango</ion-select-option>
132+
<ion-select-option value="1dragonfruit">Dragonfruit</ion-select-option>
133+
<ion-select-option value="1kiwi">Kiwi</ion-select-option>
134+
<ion-select-option value="1blackberry">Blackberry</ion-select-option>
135+
<ion-select-option value="1blueberry">Blueberry</ion-select-option>
136+
137+
<ion-select-option value="2apples">Apples</ion-select-option>
138+
<ion-select-option value="2oranges">Oranges</ion-select-option>
139+
<ion-select-option value="2pears">Pears</ion-select-option>
140+
<ion-select-option value="2pineaple">Pineaple</ion-select-option>
141+
<ion-select-option value="2peach">Peach</ion-select-option>
142+
<ion-select-option value="2melon">Melon</ion-select-option>
143+
<ion-select-option value="2watermelon">Watermelon</ion-select-option>
144+
<ion-select-option value="2strawberry">Strawberry</ion-select-option>
145+
<ion-select-option value="2grapes">Grapes</ion-select-option>
146+
<ion-select-option value="2banana">Banana</ion-select-option>
147+
<ion-select-option value="2mango">Mango</ion-select-option>
148+
<ion-select-option value="2dragonfruit">Dragonfruit</ion-select-option>
149+
<ion-select-option value="2kiwi">Kiwi</ion-select-option>
150+
<ion-select-option value="2blackberry">Blackberry</ion-select-option>
151+
<ion-select-option value="2blueberry">Blueberry</ion-select-option>
52152
</ion-select>
53153
</ion-item>
54154

@@ -57,6 +157,18 @@
57157
<ion-select-option value="apples">Apples</ion-select-option>
58158
<ion-select-option value="oranges">Oranges</ion-select-option>
59159
<ion-select-option value="pears">Pears</ion-select-option>
160+
<ion-select-option value="pineaple">Pineaple</ion-select-option>
161+
<ion-select-option value="peach">Peach</ion-select-option>
162+
<ion-select-option value="melon">Melon</ion-select-option>
163+
<ion-select-option value="watermelon">Watermelon</ion-select-option>
164+
<ion-select-option value="strawberry">Strawberry</ion-select-option>
165+
<ion-select-option value="grapes">Grapes</ion-select-option>
166+
<ion-select-option value="banana">Banana</ion-select-option>
167+
<ion-select-option value="mango">Mango</ion-select-option>
168+
<ion-select-option value="dragonfruit">Dragonfruit</ion-select-option>
169+
<ion-select-option value="kiwi">Kiwi</ion-select-option>
170+
<ion-select-option value="blackberry">Blackberry</ion-select-option>
171+
<ion-select-option value="blueberry">Blueberry</ion-select-option>
60172
</ion-select>
61173
</ion-item>
62174
</ion-list>

0 commit comments

Comments
 (0)