diff --git a/e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_expiry/custom_status_expiry_4_spec.ts b/e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_expiry/custom_status_expiry_4_spec.ts index 4ae44b6478..f358dc7ee8 100644 --- a/e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_expiry/custom_status_expiry_4_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_expiry/custom_status_expiry_4_spec.ts @@ -142,4 +142,33 @@ describe('MM-T4066 Setting manual status clear time more than 7 days away', () = // * Correct clear time should be displayed in the status dropdown cy.get('.status-dropdown-menu .custom_status__expiry time').should('have.text', dateToBeSelected.format('MMM DD')); }); + + it('MM-52881 should show the selected date when reopening the date picker', () => { + // # clear the status + cy.get('.input-clear-x').click(); + + // # open the status modal + cy.get('.custom_status__row').click(); + + // # select the first option + cy.get('.statusSuggestion__row').first().click(); + + // # open the date picker + cy.get('.dateTime__calendar-icon').click(); + + // * Verify that DayPicker overlay is visible + cy.get('.date-picker__popper').should('be.visible'); + + // # Click on the date which is dateToBeSelected + for (let i = 0; i < months; i++) { + cy.get('.fa-angle-right').click(); + } + cy.get('.date-picker__popper').find(`.rdp-month button[aria-label="${dateToBeSelected.format('Do MMMM (dddd)')}"]`).click(); + + // # reopen the date picker + cy.get('.dateTime__calendar-icon').click(); + + // * Verify that date selected is still selected + cy.get('.date-picker__popper').find(`.rdp-month button[aria-label="${dateToBeSelected.format('Do MMMM (dddd)')}"]`).should('have.class', 'rdp-day_selected'); + }); }); diff --git a/webapp/channels/src/components/custom_status/date_time_input.tsx b/webapp/channels/src/components/custom_status/date_time_input.tsx index 252ba2f58e..7756b7f4d8 100644 --- a/webapp/channels/src/components/custom_status/date_time_input.tsx +++ b/webapp/channels/src/components/custom_status/date_time_input.tsx @@ -145,7 +145,8 @@ const DateTimeInputContainer: React.FC = (props: Props) => { const datePickerProps: DayPickerProps = { initialFocus: isPopperOpen, mode: 'single', - selected: currentTime, + selected: time.toDate(), + defaultMonth: time.toDate(), onDayClick: handleDayChange, disabled: [{ before: currentTime,