Skip to content

Commit 8318659

Browse files
sean-perkinssean-perkins
authored
fix(picker-column): column renders correctly with selected value (#24988)
Resolves #17664
1 parent bcd00c7 commit 8318659

File tree

5 files changed

+169
-146
lines changed

5 files changed

+169
-146
lines changed

‎core/src/components.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1856,7 +1856,7 @@ export namespace Components {
18561856
*/
18571857
"animated": boolean;
18581858
/**
1859-
* If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode on mobile. Does not apply in `md` mode or on desktop.
1859+
* If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode. Does not apply in `md` mode.
18601860
*/
18611861
"arrow": boolean;
18621862
/**
@@ -5493,7 +5493,7 @@ declare namespace LocalJSX {
54935493
*/
54945494
"animated"?: boolean;
54955495
/**
5496-
* If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode on mobile. Does not apply in `md` mode or on desktop.
5496+
* If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode. Does not apply in `md` mode.
54975497
*/
54985498
"arrow"?: boolean;
54995499
/**

‎core/src/components/picker-column/picker-column.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,8 +168,9 @@ export class PickerColumnCmp implements ComponentInterface {
168168
// Update transform
169169
if (transform !== opt.transform) {
170170
opt.transform = transform;
171-
button.style.transform = transform;
172171
}
172+
button.style.transform = transform;
173+
173174
// Update selected item
174175
if (selected !== opt.selected) {
175176
opt.selected = selected;

‎core/src/components/picker/test/basic/e2e.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { newE2EPage } from '@stencil/core/testing';
2+
3+
describe('picker: basic', () => {
4+
it('should match existing screenshots', async () => {
5+
const page = await newE2EPage({
6+
url: '/src/components/picker/test/basic?ionic:_testing=true',
7+
});
8+
9+
const compares = [];
10+
11+
await page.click('#basic');
12+
13+
await page.waitForEvent('ionPickerDidPresent');
14+
15+
compares.push(await page.compareScreenshot('picker initial state'));
16+
17+
await page.click('ion-picker .save-btn');
18+
19+
await page.click('#basic');
20+
21+
await page.waitForEvent('ionPickerDidPresent');
22+
23+
compares.push(await page.compareScreenshot('picker opened with selected value'));
24+
25+
for (const compare of compares) {
26+
expect(compare).toMatchScreenshot();
27+
}
28+
});
29+
});

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

Lines changed: 122 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -1,143 +1,133 @@
11
<!DOCTYPE html>
22
<html lang="en" dir="ltr">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<title>Picker - Basic</title>
6-
<meta
7-
name="viewport"
8-
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
9-
/>
10-
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
11-
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12-
<script src="../../../../../scripts/testing/scripts.js"></script>
13-
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
14-
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15-
</head>
16-
<script type="module">
17-
import { pickerController } from '../../../../dist/ionic/index.esm.js';
18-
window.pickerController = pickerController;
19-
</script>
20-
<body>
21-
<ion-app>
22-
<ion-header>
23-
<ion-toolbar>
24-
<ion-title>Picker - Basic</ion-title>
25-
</ion-toolbar>
26-
</ion-header>
273

28-
<ion-content class="ion-padding">
29-
<ion-button id="basic" expand="block" onclick="presentPicker()">Show Picker</ion-button>
30-
<ion-button id="custom" expand="block" onclick="presentPicker('my-custom-class')"
31-
>Show Custom Picker</ion-button
32-
>
33-
</ion-content>
34-
</ion-app>
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Picker - Basic</title>
7+
<meta name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
9+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
10+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
11+
<script src="../../../../../scripts/testing/scripts.js"></script>
12+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
13+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
14+
</head>
15+
<script type="module">
16+
import { pickerController } from '../../../../dist/ionic/index.esm.js';
17+
window.pickerController = pickerController;
18+
</script>
19+
20+
<body>
21+
<ion-app>
22+
23+
<ion-content class="ion-padding">
24+
<ion-button id="basic" expand="block" onclick="presentPicker()">Show Picker</ion-button>
25+
<ion-button id="custom" expand="block" onclick="presentPicker('my-custom-class')">Show Custom Picker</ion-button>
26+
</ion-content>
27+
</ion-app>
3528

36-
<style>
37-
.my-custom-class {
38-
--width: 200px;
39-
--height: 50%;
29+
<style>
30+
.my-custom-class {
31+
--width: 200px;
32+
--height: 50%;
4033

41-
--background: #272727;
42-
--background-rgb: 39, 39, 39;
43-
--border-width: 2px;
44-
--border-color: #000000;
45-
--border-radius: 16px 16px 0 0;
34+
--background: #272727;
35+
--background-rgb: 39, 39, 39;
36+
--border-width: 2px;
37+
--border-color: #000000;
38+
--border-radius: 16px 16px 0 0;
4639

47-
color: #d6d6d6;
48-
}
49-
</style>
40+
color: #d6d6d6;
41+
}
42+
</style>
5043

51-
<script>
52-
async function presentPicker(customClass) {
53-
const pickerElement = await pickerController.create({
54-
buttons: [
55-
{
56-
text: 'Cancel',
57-
role: 'cancel',
58-
handler: () => console.log('Clicked Cancel!'),
59-
},
60-
{
61-
text: 'Save',
62-
handler: () => console.log('Clicked Save!'),
63-
},
64-
{
65-
text: 'Log',
66-
handler: (val) => {
67-
console.log('Clicked Log. Do not Dismiss.', val);
68-
return false;
69-
},
70-
},
71-
],
72-
columns: [
73-
{
74-
name: 'hours',
75-
prefix: 'total',
76-
suffix: 'hours',
77-
options: [
78-
{
79-
text: '1',
80-
value: '01',
81-
},
82-
{
83-
text: '2',
84-
value: '02',
85-
},
86-
{
87-
text: '3',
88-
value: '03',
89-
},
90-
{
91-
text: '4',
92-
value: '04',
93-
},
94-
{
95-
text: '5',
96-
value: '05',
97-
},
98-
{
99-
text: '6',
100-
value: '06',
101-
},
102-
{
103-
text: '7',
104-
value: '07',
105-
},
106-
{
107-
text: '8',
108-
value: '08',
109-
},
110-
{
111-
text: '9',
112-
value: '09',
113-
},
114-
{
115-
text: '10',
116-
value: '10',
117-
},
118-
{
119-
text: '11',
120-
value: '11',
121-
},
122-
{
123-
text: '12',
124-
value: '12',
125-
},
126-
],
127-
},
128-
],
129-
htmlAttributes: {
130-
'data-testid': 'basic-picker',
131-
},
132-
cssClass: customClass,
133-
});
44+
<script>
45+
selectedIndex = 0;
13446

135-
await pickerElement.present();
47+
const options = [{
48+
text: '1',
49+
value: '01'
50+
},
51+
{
52+
text: '2',
53+
value: '02'
54+
},
55+
{
56+
text: '3',
57+
value: '03'
58+
},
59+
{
60+
text: '4',
61+
value: '04'
62+
},
63+
{
64+
text: '5',
65+
value: '05'
66+
},
67+
{
68+
text: '6',
69+
value: '06'
70+
},
71+
{
72+
text: '7',
73+
value: '07'
74+
},
75+
{
76+
text: '8',
77+
value: '08'
78+
},
79+
{
80+
text: '9',
81+
value: '09'
82+
},
83+
{
84+
text: '10',
85+
value: '10'
86+
},
87+
{
88+
text: '11',
89+
value: '11'
90+
},
91+
{
92+
text: '12',
93+
value: '12'
94+
}];
13695

137-
const { data, role } = await pickerElement.onDidDismiss();
96+
async function presentPicker(customClass) {
97+
const pickerElement = await pickerController.create({
98+
buttons: [{
99+
text: 'Cancel',
100+
role: 'cancel',
101+
handler: () => console.log('Clicked Cancel!')
102+
}, {
103+
text: 'Save',
104+
cssClass: 'save-btn',
105+
handler: (ev) => {
106+
const v = ev.hours.value;
107+
selectedIndex = options.findIndex(opt => opt.value === v);
108+
}
109+
}, {
110+
text: 'Log',
111+
handler: (val) => {
112+
return false;
113+
}
114+
}],
115+
columns: [{
116+
name: 'hours',
117+
selectedIndex: selectedIndex,
118+
prefix: 'total',
119+
suffix: 'hours',
120+
options: [...options]
121+
}],
122+
htmlAttributes: {
123+
'data-testid': 'basic-picker'
124+
},
125+
cssClass: customClass
126+
});
127+
128+
await pickerElement.present();
129+
}
130+
</script>
131+
</body>
138132

139-
console.log('Picker dismissed!', data, role);
140-
}
141-
</script>
142-
</body>
143133
</html>

‎core/src/utils/test/utils.ts‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -147,20 +147,23 @@ export const waitForFunctionTestContext = async (fn: any, params: any, interval
147147
* https://github.com/GoogleChrome/puppeteer/issues/858#issuecomment-359763824
148148
*/
149149
export const queryDeep = async (page: E2EPage, ...selectors: string[]): Promise<ElementHandle> => {
150-
const shadowSelectorFn = (el: Element, selector: string): Element | null => (el?.shadowRoot) && el.shadowRoot.querySelector(selector);
150+
const shadowSelectorFn = (el: Element, selector: string): Element | null =>
151+
el?.shadowRoot && el.shadowRoot.querySelector(selector);
151152

152-
// eslint-disable-next-line no-async-promise-executor
153-
return new Promise(async resolve => {
154-
const [firstSelector, ...restSelectors] = selectors;
155-
let parentElement = await page.$(firstSelector);
153+
// eslint-disable-next-line no-async-promise-executor
154+
return new Promise(async (resolve) => {
155+
const [firstSelector, ...restSelectors] = selectors;
156+
let parentElement = await page.$(firstSelector);
156157

157-
for (const selector of restSelectors) {
158-
parentElement = await page.evaluateHandle(shadowSelectorFn, parentElement, selector) as any;
159-
}
158+
for (const selector of restSelectors) {
159+
parentElement = (await page.evaluateHandle(shadowSelectorFn, parentElement, selector)) as any;
160+
}
160161

161-
if (parentElement) { resolve(parentElement); }
162-
});
163-
};
162+
if (parentElement) {
163+
resolve(parentElement);
164+
}
165+
});
166+
};
164167
/**
165168
* Given an element and optional selector, use the selector if
166169
* it exists or get the node name of that element if not. Combine

0 commit comments

Comments
 (0)