javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(item-sliding): open method works with items added async (#27035)

Browse Source 
resolves #26991
This commit is contained in:
Liam DeBeasi
2023-03-28 12:53:36 -04:00
committed by GitHub
parent c9e4cd002d
commit 521063bf24
3 changed files with 82 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
core/src/components/item-sliding/item-sliding.tsx
View File

@@ -127,7 +127,16 @@ export class ItemSliding implements ComponentInterface {
*/
@Method()
async open(side: Side | undefined) {
if (this.item === null) {
/**
* It is possible for the item to be added to the DOM
* after the item-sliding component was created. As a result,
* if this.item is null, then we should attempt to
* query for the ion-item again.
* However, if the item is already defined then
* we do not query for it again.
*/
const item = (this.item = this.item ?? this.el.querySelector('ion-item'));
if (item === null) {
return;
}

49
core/src/components/item-sliding/test/async/index.html Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Item Sliding - Async</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Item Sliding - Basic</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item-sliding>
<ion-item-options side="end">
<ion-item-option>Option</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
<script>
const itemSliding = document.querySelector('ion-item-sliding');
setTimeout(() => {
const item = document.createElement('ion-item');
item.innerText = 'Item Sliding Option';
itemSliding.appendChild(item);
item.onclick = () => {
itemSliding.open('end');
};
}, 250);
</script>
</ion-content>
</ion-app>
</body>
</html>

23
core/src/components/item-sliding/test/async/item-sliding.e2e.ts Normal file
View File

@@ -0,0 +1,23 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
test.describe('item-sliding: async', () => {
test('should open even when item is added async', async ({ page, skip }) => {
skip.rtl();
skip.mode('md');
await page.goto(`/src/components/item-sliding/test/async`);
const itemEl = page.locator('ion-item');
const itemSlidingEl = page.locator('ion-item-sliding');
// Wait for item to be added to DOM
await page.waitForSelector('ion-item');
// Click item to open ion-item-sliding
await itemEl.click();
// This class is added when the item sliding component is fully open
await expect(itemSlidingEl).toHaveClass(/item-sliding-active-slide/);
});
});