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.

Sign up for GitHub

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

Jump to bottom

fix: always show date select #3948

Merged
merged 3 commits into from
Jul 11, 2023
Merged

fix: always show date select #3948

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
32d1f1e
fix: always show date select
kelatev Feb 24, 2023
5dc6e2d
fix: test for showDateSelect
kelatev Feb 28, 2023
7b7b54f
fix: remove unused help comment
kelatev Jun 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 7 additions & 3 deletions src/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,6 +254,7 @@ export default class DatePicker extends React.Component {
showFourColumnMonthYearPicker: PropTypes.bool,
showYearPicker: PropTypes.bool,
showQuarterYearPicker: PropTypes.bool,
showDateSelect: PropTypes.bool,
showTimeSelect: PropTypes.bool,
showTimeSelectOnly: PropTypes.bool,
timeFormat: PropTypes.string,
Expand Down Expand Up @@ -537,7 +538,9 @@ export default class DatePicker extends React.Component {
this.props.onChangeRaw(event);
}
this.setSelected(date, event, false, monthSelectedIn);
this.setState({ isRenderAriaLiveMessage: true });
if (this.props.showDateSelect) {
this.setState({ isRenderAriaLiveMessage: true });
}
Comment on lines -540 to +543
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are we adding this behind a prop?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this.setState({ isRenderAriaLiveMessage: true }); run in func handleSelect without check for need to renderAriaLiveMessage
Any change date on datepicker run handleSelect and always set isRenderAriaLiveMessage: true

This code fix that. set isRenderAriaLiveMessage: true only if developer set prop showDateSelect

if (!this.props.shouldCloseOnSelect || this.props.showTimeSelect) {
this.setPreSelection(date);
} else if (!this.props.inline) {
Expand Down Expand Up @@ -979,6 +982,7 @@ export default class DatePicker extends React.Component {
weekDayClassName={this.props.weekDayClassName}
monthClassName={this.props.monthClassName}
timeClassName={this.props.timeClassName}
showDateSelect={this.props.showDateSelect}
showTimeSelect={this.props.showTimeSelect}
showTimeSelectOnly={this.props.showTimeSelectOnly}
onTimeChange={this.handleTimeChange}
Expand Down Expand Up @@ -1093,7 +1097,7 @@ export default class DatePicker extends React.Component {
aria-live="polite"
className="react-datepicker__aria-live"
>
{this.state.isRenderAriaLiveMessage && ariaLiveMessage}
{ariaLiveMessage}
</span>
);
};
Expand Down Expand Up @@ -1193,7 +1197,7 @@ export default class DatePicker extends React.Component {
<path d="M96 32V64H48C21.5 64 0 85.5 0 112v48H448V112c0-26.5-21.5-48-48-48H352V32c0-17.7-14.3-32-32-32s-32 14.3-32 32V64H160V32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192H0V464c0 26.5 21.5 48 48 48H400c26.5 0 48-21.5 48-48V192z" />
</svg>
)}
{this.renderAriaLiveRegion()}
{this.state.isRenderAriaLiveMessage && this.renderAriaLiveRegion()}
{this.renderDateInput()}
{this.renderClearButton()}
</div>
Expand Down
4 changes: 2 additions & 2 deletions test/datepicker_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2044,7 +2044,7 @@ describe("DatePicker", () => {
describe("should render aria live region after date selection", () => {
it("should have correct format if datepicker does not contain time", () => {
const datePicker = TestUtils.renderIntoDocument(
<DatePicker selected={utils.newDate()} />
<DatePicker showDateSelect selected={utils.newDate()} />
);
const dateInput = datePicker.input;

Expand All @@ -2069,7 +2069,7 @@ describe("DatePicker", () => {

it("should have correct format if datepicker contains time", () => {
const datePicker = TestUtils.renderIntoDocument(
<DatePicker showTimeInput selected={utils.newDate()} />
<DatePicker showTimeInput showDateSelect selected={utils.newDate()} />
);
const dateInput = datePicker.input;

Expand Down