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

fix(datetime): clear button calls reset method

Browse Source
This commit is contained in:
Liam DeBeasi
2023-08-14 09:13:30 -04:00
parent c2bcdcbec3
commit a08a07cbab
3 changed files with 10 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components.d.ts vendored
View File

@@ -919,11 +919,11 @@ export namespace Components {
*/
"reset": (startDate?: string) => Promise<void>;
/**
* If `true`, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
* If `true`, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered. Pressing the "Clear" button will call the "reset" method.
*/
"showClearButton": boolean;
/**
* If `true`, the default "Cancel" and "OK" buttons will be rendered at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
* If `true`, the default "Cancel" and "OK" buttons will be rendered at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered. Pressing the "Cancel" button will call the "cancel" method. Pressing the "OK" button will the "confirm" method.
*/
"showDefaultButtons": boolean;
/**
@@ -4954,11 +4954,11 @@ declare namespace LocalJSX {
*/
"readonly"?: boolean;
/**
* If `true`, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
* If `true`, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered. Pressing the "Clear" button will call the "reset" method.
*/
"showClearButton"?: boolean;
/**
* If `true`, the default "Cancel" and "OK" buttons will be rendered at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
* If `true`, the default "Cancel" and "OK" buttons will be rendered at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered. Pressing the "Cancel" button will call the "cancel" method. Pressing the "OK" button will the "confirm" method.
*/
"showDefaultButtons"?: boolean;
/**

12
core/src/components/datetime/datetime.tsx
View File

@@ -424,6 +424,9 @@ export class Datetime implements ComponentInterface {
* if they want to customize these buttons. If custom
* buttons are set in the `button` slot then the
* default buttons will not be rendered.
*
* Pressing the "Cancel" button will call the "cancel" method.
* Pressing the "OK" button will the "confirm" method.
*/
@Prop() showDefaultButtons = false;
@@ -434,6 +437,8 @@ export class Datetime implements ComponentInterface {
* if they want to customize these buttons. If custom
* buttons are set in the `button` slot then the
* default buttons will not be rendered.
*
* Pressing the "Clear" button will call the "reset" method.
*/
@Prop() showClearButton = false;
@@ -1380,11 +1385,6 @@ export class Datetime implements ComponentInterface {
return;
}
const clearButtonClick = () => {
this.reset();
this.setValue(undefined);
};
/**
* By default we render two buttons:
* Cancel - Dismisses the datetime and
@@ -1410,7 +1410,7 @@ export class Datetime implements ComponentInterface {
)}
<div>
{showClearButton && (
<ion-button id="clear-button" color={this.color} onClick={() => clearButtonClick()}>
<ion-button id="clear-button" color={this.color} onClick={() => this.reset()}>
{this.clearText}
</ion-button>
)}

34
core/src/components/datetime/test/basic/datetime.e2e.ts
View File

@@ -380,40 +380,6 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
});
});
/**
* This behavior does not differ across
* modes/directions.
*/
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
test.describe(title('datetime: clear button'), () => {
test('should clear the active calendar day', async ({ page }, testInfo) => {
testInfo.annotations.push({
type: 'issue',
description: 'https://github.com/ionic-team/ionic-framework/issues/26258',
});
await page.setContent(
`
<ion-datetime value="2022-11-10" show-clear-button="true"></ion-datetime>
`,
config
);
await page.waitForSelector('.datetime-ready');
const selectedDay = page.locator('ion-datetime .calendar-day-active');
await expect(selectedDay).toHaveText('10');
await page.click('ion-datetime #clear-button');
await page.waitForChanges();
await expect(selectedDay).toHaveCount(0);
});
});
});
/**
* This behavior does not differ across
* modes/directions.