diff --git a/core/src/components.d.ts b/core/src/components.d.ts index fe17e6c3ef..c3e2b59909 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -919,11 +919,11 @@ export namespace Components { */ "reset": (startDate?: string) => Promise; /** - * 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; /** diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 2b6ccc904f..bc96bb96be 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -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 { )}
{showClearButton && ( - clearButtonClick()}> + this.reset()}> {this.clearText} )} diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts index f42afe91df..08e0a61a67 100644 --- a/core/src/components/datetime/test/basic/datetime.e2e.ts +++ b/core/src/components/datetime/test/basic/datetime.e2e.ts @@ -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( - ` - - `, - 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.