opensourcemirror
/
Ionic
mirror of https://github.com/ionic-team/ionic.git
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(item): handle multiple inputs inside ion-item correctly (#18348) 

fixes #15850
This commit is contained in:
David 2019-11-13 23:28:15 +01:00 committed by Brandy Carney
parent 21484f1f3a
commit 768e3ae2cf
4 changed files with 139 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
core/src/components/item/item.scss
View File

@ -404,7 +404,6 @@ button, a {
position: relative;
}
// Item Textarea
// --------------------------------------------------

7
core/src/components/item/item.tsx
View File

@ -136,9 +136,14 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
// input cover on top of those interfering with their clicks
const inputs = this.el.querySelectorAll('ion-input, ion-range, ion-searchbar, ion-segment, ion-textarea, ion-toggle');
// The following elements should also stay clickable when an input with cover is present
const clickables = this.el.querySelectorAll('ion-anchor, ion-button, a, button');
// Check for multiple inputs to change the position of the input cover to relative
// for all of the covered inputs above
this.multipleInputs = covers.length + inputs.length > 1;
this.multipleInputs = covers.length + inputs.length > 1
|| covers.length + clickables.length > 1
|| covers.length > 0 && this.isClickable();
}
// If the item contains an input including a checkbox, datetime, select, or radio

29
core/src/components/item/test/inputs/e2e.ts
View File

@ -2,12 +2,15 @@ import { E2EPage, newE2EPage } from '@stencil/core/testing';
test('item: inputs', async () => {
const page = await newE2EPage({
url: '/src/components/item/test/inputs?ionic:_testing=true'
url: '/src/components/item/test/inputs?ionic:_testing=true',
});
// check form
await page.click('#submit');
await checkFormResult(page, '{"date":"","select":"n64","toggle":"","input":"","input2":"","checkbox":"","range":"10"}');
await checkFormResult(
page,
'{"date":"","select":"n64","toggle":"","input":"","input2":"","checkbox":"","range":"10"}'
);
await page.waitFor(100);
// Default case, enabled and no value
@ -22,6 +25,7 @@ test('item: inputs', async () => {
// check form
await page.click('#submit');
await page.waitFor(100);
await checkFormResult(page, '{}');
await page.waitFor(100);
@ -36,7 +40,10 @@ test('item: inputs', async () => {
// check form
await page.click('#submit');
await checkFormResult(page, '{"date":"2016-12-09","select":"nes","toggle":"on","input":"Some text","input2":"Some text","checkbox":"on","range":"20"}');
await checkFormResult(
page,
'{"date":"2016-12-09","select":"nes","toggle":"on","input":"Some text","input2":"Some text","checkbox":"on","range":"20"}'
);
await page.waitFor(100);
compare = await page.compareScreenshot('should reenable and set value');
@ -62,6 +69,22 @@ test('item: inputs', async () => {
compare = await page.compareScreenshot('should set empty');
expect(compare).toMatchScreenshot();
// Test multiple
await page.click('#checkbox-start');
await page.click('#datetime-end');
await page.waitFor(300);
compare = await page.compareScreenshot(
'should check checkbox and open datepicker'
);
expect(compare).toMatchScreenshot();
await page.click('#button-end');
await page.waitFor(100);
compare = await page.compareScreenshot('should change button color to red');
expect(compare).toMatchScreenshot();
});
const checkFormResult = async (page: E2EPage, content: string) => {

157
core/src/components/item/test/inputs/index.html
View File

@ -22,62 +22,62 @@
<ion-content class="ion-padding-vertical">
<form onsubmit="return onSubmit(event)">
<ion-list>
<ion-item>
<ion-label>Simple item</ion-label>
</ion-item>
<ion-list class="basic">
<ion-item>
<ion-label>Simple item</ion-label>
</ion-item>
<ion-item id="item" button onclick="testClick(event)">
<ion-label>Item Button</ion-label>
</ion-item>
<ion-item id="item" button onclick="testClick(event)">
<ion-label>Item Button</ion-label>
</ion-item>
<ion-item>
<ion-label>DateTime</ion-label>
<ion-datetime name="date" id="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>DateTime</ion-label>
<ion-datetime name="date" id="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Select</ion-label>
<ion-select name="select" id="select">
<ion-select-option value="">No Game Console</ion-select-option>
<ion-select-option value="nes">NES</ion-select-option>
<ion-select-option value="n64" selected>Nintendo64</ion-select-option>
<ion-select-option value="ps">PlayStation</ion-select-option>
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
<ion-select-option value="snes">SNES</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Select</ion-label>
<ion-select name="select" id="select">
<ion-select-option value="">No Game Console</ion-select-option>
<ion-select-option value="nes">NES</ion-select-option>
<ion-select-option value="n64" selected>Nintendo64</ion-select-option>
<ion-select-option value="ps">PlayStation</ion-select-option>
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
<ion-select-option value="snes">SNES</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Toggle</ion-label>
<ion-toggle name="toggle" id="toggle" name="Actually" slot="end"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Toggle</ion-label>
<ion-toggle name="toggle" id="toggle" name="Actually" slot="end"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Input (text)</ion-label>
<ion-input name="input" id="text"></ion-input>
</ion-item>
<ion-item>
<ion-label>Input (text)</ion-label>
<ion-input name="input" id="text"></ion-input>
</ion-item>
<ion-item>
<ion-label>Input (placeholder)</ion-label>
<ion-input name="input2" id="placeholder" placeholder="Placeholder"></ion-input>
</ion-item>
<ion-item>
<ion-label>Input (placeholder)</ion-label>
<ion-input name="input2" id="placeholder" placeholder="Placeholder"></ion-input>
</ion-item>
<ion-item>
<ion-label>Checkbox</ion-label>
<ion-checkbox name="checkbox" id="checkbox" slot="start"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Checkbox</ion-label>
<ion-checkbox name="checkbox" id="checkbox" slot="start"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Range</ion-label>
<ion-range name="range" id="range" value="10"></ion-range>
</ion-item>
</ion-list>
<ion-item>
<ion-label>Range</ion-label>
<ion-range name="range" id="range" value="10"></ion-range>
</ion-item>
</ion-list>
<ion-button id="submit" type="submit">Submit</ion-button>
<p id="form-result"></p>
</form>
<ion-button id="submit" type="submit">Submit</ion-button>
<p id="form-result"></p>
</form>
<ion-list>
<ion-list-header>Controls</ion-list-header>
@ -112,14 +112,66 @@
Fixed
</ion-item>
</ion-list>
</ion-content>
<ion-list-header>Multiple inputs/clickables</ion-list-header>
<ion-list class="multiple">
<ion-item>
<ion-checkbox slot="start" id="checkbox-start"></ion-checkbox>
<ion-label>Multiple inputs w/ cover</ion-label>
<ion-datetime placeholder="startTime" display-format="HH:mm" id="datetime-end"></ion-datetime>
<ion-checkbox slot="end" id="checkbox-end"></ion-checkbox>
</ion-item>
<ion-item>
<ion-select slot="start" placeholder="month" id="select-start">
<ion-select-option value="1">January</ion-select-option>
<ion-select-option value="2">February</ion-select-option>
<ion-select-option value="3">March</ion-select-option>
</ion-select>
<ion-label>Input w/ clickable</ion-label>
<ion-button slot="end" id="button-end" onclick="setButtonColorRed()">Button</ion-button>
</ion-item>
<ion-item>
<ion-radio slot="start" id="radio-start"></ion-radio>
<ion-label>Input w/ cover + input</ion-label>
<ion-range value="45" id="range-end"></ion-range>
</ion-item>
<ion-item>
<ion-range value="60" id="range-start"></ion-range>
<ion-label>Multiple inputs w/o cover</ion-label>
<ion-toggle id="toggle-1-end"></ion-toggle>
<ion-toggle id="toggle-2-end"></ion-toggle>
</ion-item>
<ion-item button id="clickableItem">
<ion-label>Clickable item</ion-label>
<ion-checkbox slot="end"></ion-checkbox>
</ion-item>
<ion-item>
<ion-checkbox slot="start"></ion-checkbox>
<ion-label>Checkbox w/ disabled button</ion-label>
<ion-button slot="end" onclick="setButtonColorRed()" disabled>Button</ion-button>
</ion-item>
</ion-list>
</ion-content>
</ion-app>
<script>
var ids = ['item', 'datetime', 'select', 'toggle', 'text', 'placeholder', 'checkbox', 'toggle', 'range']
var ids = ['item', 'datetime', 'select', 'toggle', 'text', 'placeholder', 'checkbox', 'toggle', 'range'];
var isDisabled = false;
const clickableItem = document.querySelector('#clickableItem')
clickableItem.addEventListener('click', function() {
console.log('Clicked item', clickableItem);
const color = clickableItem.color;
clickableItem.color = color === undefined ? 'primary' : undefined;
});
function toggleDisabled() {
isDisabled = !isDisabled;
Object.values(getInputs()).forEach(el => el.disabled = isDisabled);
@ -171,7 +223,7 @@
}
function setLabelPosition(position) {
Array.from(document.querySelectorAll('ion-label'))
Array.from(document.querySelectorAll('ion-list.basic ion-label'))
.forEach(label => label.position = position);
}
@ -197,6 +249,11 @@
return false;
}
function setButtonColorRed() {
const button = document.getElementById('button-end');
button.style.setProperty('--background', '#ff0000');
}
</script>
</html>