Skip to content

Commit 768e3ae

Browse files
DavidStrauszbrandyscarney
DavidStrausz
authored and
brandyscarney
committed
fix(item): handle multiple inputs inside ion-item correctly (#18348)
fixes #15850
1 parent 21484f1 commit 768e3ae

File tree

4 files changed

+148
-64
lines changed

4 files changed

+148
-64
lines changed

‎core/src/components/item/item.scss

-1
Original file line numberDiff line numberDiff line change
@@ -404,7 +404,6 @@ button, a {
404404
position: relative;
405405
}
406406

407-
408407
// Item Textarea
409408
// --------------------------------------------------
410409

‎core/src/components/item/item.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -136,9 +136,14 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
136136
// input cover on top of those interfering with their clicks
137137
const inputs = this.el.querySelectorAll('ion-input, ion-range, ion-searchbar, ion-segment, ion-textarea, ion-toggle');
138138

139+
// The following elements should also stay clickable when an input with cover is present
140+
const clickables = this.el.querySelectorAll('ion-anchor, ion-button, a, button');
141+
139142
// Check for multiple inputs to change the position of the input cover to relative
140143
// for all of the covered inputs above
141-
this.multipleInputs = covers.length + inputs.length > 1;
144+
this.multipleInputs = covers.length + inputs.length > 1
145+
|| covers.length + clickables.length > 1
146+
|| covers.length > 0 && this.isClickable();
142147
}
143148

144149
// If the item contains an input including a checkbox, datetime, select, or radio

‎core/src/components/item/test/inputs/e2e.ts

+26-3
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,15 @@ import { E2EPage, newE2EPage } from '@stencil/core/testing';
22

33
test('item: inputs', async () => {
44
const page = await newE2EPage({
5-
url: '/src/components/item/test/inputs?ionic:_testing=true'
5+
url: '/src/components/item/test/inputs?ionic:_testing=true',
66
});
77

88
// check form
99
await page.click('#submit');
10-
await checkFormResult(page, '{"date":"","select":"n64","toggle":"","input":"","input2":"","checkbox":"","range":"10"}');
10+
await checkFormResult(
11+
page,
12+
'{"date":"","select":"n64","toggle":"","input":"","input2":"","checkbox":"","range":"10"}'
13+
);
1114
await page.waitFor(100);
1215

1316
// Default case, enabled and no value
@@ -22,6 +25,7 @@ test('item: inputs', async () => {
2225

2326
// check form
2427
await page.click('#submit');
28+
await page.waitFor(100);
2529
await checkFormResult(page, '{}');
2630
await page.waitFor(100);
2731

@@ -36,7 +40,10 @@ test('item: inputs', async () => {
3640

3741
// check form
3842
await page.click('#submit');
39-
await checkFormResult(page, '{"date":"2016-12-09","select":"nes","toggle":"on","input":"Some text","input2":"Some text","checkbox":"on","range":"20"}');
43+
await checkFormResult(
44+
page,
45+
'{"date":"2016-12-09","select":"nes","toggle":"on","input":"Some text","input2":"Some text","checkbox":"on","range":"20"}'
46+
);
4047
await page.waitFor(100);
4148

4249
compare = await page.compareScreenshot('should reenable and set value');
@@ -62,6 +69,22 @@ test('item: inputs', async () => {
6269

6370
compare = await page.compareScreenshot('should set empty');
6471
expect(compare).toMatchScreenshot();
72+
73+
// Test multiple
74+
await page.click('#checkbox-start');
75+
await page.click('#datetime-end');
76+
await page.waitFor(300);
77+
78+
compare = await page.compareScreenshot(
79+
'should check checkbox and open datepicker'
80+
);
81+
expect(compare).toMatchScreenshot();
82+
83+
await page.click('#button-end');
84+
await page.waitFor(100);
85+
86+
compare = await page.compareScreenshot('should change button color to red');
87+
expect(compare).toMatchScreenshot();
6588
});
6689

6790
const checkFormResult = async (page: E2EPage, content: string) => {

‎core/src/components/item/test/inputs/index.html

+116-59
Original file line numberDiff line numberDiff line change
@@ -22,62 +22,62 @@
2222

2323
<ion-content class="ion-padding-vertical">
2424
<form onsubmit="return onSubmit(event)">
25-
<ion-list>
26-
<ion-item>
27-
<ion-label>Simple item</ion-label>
28-
</ion-item>
29-
30-
<ion-item id="item" button onclick="testClick(event)">
31-
<ion-label>Item Button</ion-label>
32-
</ion-item>
33-
34-
<ion-item>
35-
<ion-label>DateTime</ion-label>
36-
<ion-datetime name="date" id="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY"></ion-datetime>
37-
</ion-item>
38-
39-
<ion-item>
40-
<ion-label>Select</ion-label>
41-
<ion-select name="select" id="select">
42-
<ion-select-option value="">No Game Console</ion-select-option>
43-
<ion-select-option value="nes">NES</ion-select-option>
44-
<ion-select-option value="n64" selected>Nintendo64</ion-select-option>
45-
<ion-select-option value="ps">PlayStation</ion-select-option>
46-
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
47-
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
48-
<ion-select-option value="snes">SNES</ion-select-option>
49-
</ion-select>
50-
</ion-item>
51-
52-
<ion-item>
53-
<ion-label>Toggle</ion-label>
54-
<ion-toggle name="toggle" id="toggle" name="Actually" slot="end"></ion-toggle>
55-
</ion-item>
56-
57-
<ion-item>
58-
<ion-label>Input (text)</ion-label>
59-
<ion-input name="input" id="text"></ion-input>
60-
</ion-item>
61-
62-
<ion-item>
63-
<ion-label>Input (placeholder)</ion-label>
64-
<ion-input name="input2" id="placeholder" placeholder="Placeholder"></ion-input>
65-
</ion-item>
66-
67-
<ion-item>
68-
<ion-label>Checkbox</ion-label>
69-
<ion-checkbox name="checkbox" id="checkbox" slot="start"></ion-checkbox>
70-
</ion-item>
71-
72-
<ion-item>
73-
<ion-label>Range</ion-label>
74-
<ion-range name="range" id="range" value="10"></ion-range>
75-
</ion-item>
76-
</ion-list>
77-
78-
<ion-button id="submit" type="submit">Submit</ion-button>
79-
<p id="form-result"></p>
80-
</form>
25+
<ion-list class="basic">
26+
<ion-item>
27+
<ion-label>Simple item</ion-label>
28+
</ion-item>
29+
30+
<ion-item id="item" button onclick="testClick(event)">
31+
<ion-label>Item Button</ion-label>
32+
</ion-item>
33+
34+
<ion-item>
35+
<ion-label>DateTime</ion-label>
36+
<ion-datetime name="date" id="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY"></ion-datetime>
37+
</ion-item>
38+
39+
<ion-item>
40+
<ion-label>Select</ion-label>
41+
<ion-select name="select" id="select">
42+
<ion-select-option value="">No Game Console</ion-select-option>
43+
<ion-select-option value="nes">NES</ion-select-option>
44+
<ion-select-option value="n64" selected>Nintendo64</ion-select-option>
45+
<ion-select-option value="ps">PlayStation</ion-select-option>
46+
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
47+
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
48+
<ion-select-option value="snes">SNES</ion-select-option>
49+
</ion-select>
50+
</ion-item>
51+
52+
<ion-item>
53+
<ion-label>Toggle</ion-label>
54+
<ion-toggle name="toggle" id="toggle" name="Actually" slot="end"></ion-toggle>
55+
</ion-item>
56+
57+
<ion-item>
58+
<ion-label>Input (text)</ion-label>
59+
<ion-input name="input" id="text"></ion-input>
60+
</ion-item>
61+
62+
<ion-item>
63+
<ion-label>Input (placeholder)</ion-label>
64+
<ion-input name="input2" id="placeholder" placeholder="Placeholder"></ion-input>
65+
</ion-item>
66+
67+
<ion-item>
68+
<ion-label>Checkbox</ion-label>
69+
<ion-checkbox name="checkbox" id="checkbox" slot="start"></ion-checkbox>
70+
</ion-item>
71+
72+
<ion-item>
73+
<ion-label>Range</ion-label>
74+
<ion-range name="range" id="range" value="10"></ion-range>
75+
</ion-item>
76+
</ion-list>
77+
78+
<ion-button id="submit" type="submit">Submit</ion-button>
79+
<p id="form-result"></p>
80+
</form>
8181

8282
<ion-list>
8383
<ion-list-header>Controls</ion-list-header>
@@ -112,14 +112,66 @@
112112
Fixed
113113
</ion-item>
114114
</ion-list>
115-
</ion-content>
116115

116+
<ion-list-header>Multiple inputs/clickables</ion-list-header>
117+
<ion-list class="multiple">
118+
<ion-item>
119+
<ion-checkbox slot="start" id="checkbox-start"></ion-checkbox>
120+
<ion-label>Multiple inputs w/ cover</ion-label>
121+
<ion-datetime placeholder="startTime" display-format="HH:mm" id="datetime-end"></ion-datetime>
122+
<ion-checkbox slot="end" id="checkbox-end"></ion-checkbox>
123+
</ion-item>
124+
125+
<ion-item>
126+
<ion-select slot="start" placeholder="month" id="select-start">
127+
<ion-select-option value="1">January</ion-select-option>
128+
<ion-select-option value="2">February</ion-select-option>
129+
<ion-select-option value="3">March</ion-select-option>
130+
</ion-select>
131+
<ion-label>Input w/ clickable</ion-label>
132+
<ion-button slot="end" id="button-end" onclick="setButtonColorRed()">Button</ion-button>
133+
</ion-item>
134+
135+
<ion-item>
136+
<ion-radio slot="start" id="radio-start"></ion-radio>
137+
<ion-label>Input w/ cover + input</ion-label>
138+
<ion-range value="45" id="range-end"></ion-range>
139+
</ion-item>
140+
141+
<ion-item>
142+
<ion-range value="60" id="range-start"></ion-range>
143+
<ion-label>Multiple inputs w/o cover</ion-label>
144+
<ion-toggle id="toggle-1-end"></ion-toggle>
145+
<ion-toggle id="toggle-2-end"></ion-toggle>
146+
</ion-item>
147+
148+
<ion-item button id="clickableItem">
149+
<ion-label>Clickable item</ion-label>
150+
<ion-checkbox slot="end"></ion-checkbox>
151+
</ion-item>
152+
153+
<ion-item>
154+
<ion-checkbox slot="start"></ion-checkbox>
155+
<ion-label>Checkbox w/ disabled button</ion-label>
156+
<ion-button slot="end" onclick="setButtonColorRed()" disabled>Button</ion-button>
157+
</ion-item>
158+
</ion-list>
159+
</ion-content>
117160
</ion-app>
118161

119162
<script>
120-
var ids = ['item', 'datetime', 'select', 'toggle', 'text', 'placeholder', 'checkbox', 'toggle', 'range']
163+
var ids = ['item', 'datetime', 'select', 'toggle', 'text', 'placeholder', 'checkbox', 'toggle', 'range'];
121164
var isDisabled = false;
122165

166+
const clickableItem = document.querySelector('#clickableItem')
167+
168+
clickableItem.addEventListener('click', function() {
169+
console.log('Clicked item', clickableItem);
170+
const color = clickableItem.color;
171+
clickableItem.color = color === undefined ? 'primary' : undefined;
172+
});
173+
174+
123175
function toggleDisabled() {
124176
isDisabled = !isDisabled;
125177
Object.values(getInputs()).forEach(el => el.disabled = isDisabled);
@@ -171,7 +223,7 @@
171223
}
172224

173225
function setLabelPosition(position) {
174-
Array.from(document.querySelectorAll('ion-label'))
226+
Array.from(document.querySelectorAll('ion-list.basic ion-label'))
175227
.forEach(label => label.position = position);
176228
}
177229

@@ -197,6 +249,11 @@
197249
return false;
198250
}
199251

252+
function setButtonColorRed() {
253+
const button = document.getElementById('button-end');
254+
button.style.setProperty('--background', '#ff0000');
255+
}
256+
200257
</script>
201258

202259
</html>

0 commit comments

Comments
 (0)