Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(datetime): prefer wheel sets working value on confirmation #28520

Merged
merged 7 commits into from Dec 8, 2023
13 changes: 11 additions & 2 deletions core/src/components/datetime/datetime.tsx
Expand Up @@ -492,15 +492,24 @@ export class Datetime implements ComponentInterface {
*/
@Method()
async confirm(closeOverlay = false) {
const { isCalendarPicker, activeParts } = this;
const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
sean-perkins marked this conversation as resolved.
Show resolved Hide resolved

/**
* We only update the value if the presentation is not a calendar picker.
*/
if (activeParts !== undefined || !isCalendarPicker) {
const activePartsIsArray = Array.isArray(activeParts);
if (activePartsIsArray && activeParts.length === 0) {
sean-perkins marked this conversation as resolved.
Show resolved Hide resolved
this.setValue(undefined);
if (preferWheel) {
/**
* If the datetime is using a wheel picker, but the
* active parts are empty, then the user has confirmed the
* initial value (working parts) presented to them.
*/
this.setValue(convertDataToISO(workingParts));
} else {
this.setValue(undefined);
}
} else {
this.setValue(convertDataToISO(activeParts));
}
Expand Down
31 changes: 31 additions & 0 deletions core/src/components/datetime/test/prefer-wheel/datetime.spec.ts
@@ -0,0 +1,31 @@
import { newSpecPage } from '@stencil/core/testing';

import { Datetime } from '../../datetime';

describe('datetime: preferWheel', () => {
beforeEach(() => {
const mockIntersectionObserver = jest.fn();
mockIntersectionObserver.mockReturnValue({
observe: () => null,
unobserve: () => null,
disconnect: () => null,
});
global.IntersectionObserver = mockIntersectionObserver;
});

it('should select the working day when clicking the confirm button', async () => {
const page = await newSpecPage({
components: [Datetime],
html: '<ion-datetime prefer-wheel="true" max="2021" show-default-buttons="true"></ion-datetime>',
});

const datetime = page.body.querySelector<HTMLIonDatetimeElement>('ion-datetime')!;
const confirmButton = datetime.shadowRoot!.querySelector<HTMLIonButtonElement>('#confirm-button')!;

confirmButton.click();

await page.waitForChanges();

expect(datetime.value).toBe('2021-12-31T23:59:00');
});
});