Skip to content

Commit

Permalink
Disable clear button when the component is disabled
Browse files Browse the repository at this point in the history
  • Loading branch information
Rafatcb committed Nov 25, 2023
1 parent 13c1136 commit d857179
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 15 deletions.
36 changes: 21 additions & 15 deletions src/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -360,10 +360,10 @@ export default class DatePicker extends React.Component {
this.props.openToDate
? this.props.openToDate
: this.props.selectsEnd && this.props.startDate
? this.props.startDate
: this.props.selectsStart && this.props.endDate
? this.props.endDate
: newDate();
? this.props.startDate
: this.props.selectsStart && this.props.endDate
? this.props.endDate
: newDate();

// Convert the date from string format to standard Date format
modifyHolidays = () =>
Expand All @@ -384,8 +384,8 @@ export default class DatePicker extends React.Component {
minDate && isBefore(defaultPreSelection, startOfDay(minDate))
? minDate
: maxDate && isAfter(defaultPreSelection, endOfDay(maxDate))
? maxDate
: defaultPreSelection;
? maxDate
: defaultPreSelection;
return {
open: this.props.startOpen || false,
preventFocus: false,
Expand Down Expand Up @@ -1175,14 +1175,14 @@ export default class DatePicker extends React.Component {
typeof this.props.value === "string"
? this.props.value
: typeof this.state.inputValue === "string"
? this.state.inputValue
: this.props.selectsRange
? safeDateRangeFormat(
this.props.startDate,
this.props.endDate,
this.props,
)
: safeDateFormat(this.props.selected, this.props);
? this.state.inputValue
: this.props.selectsRange
? safeDateRangeFormat(
this.props.startDate,
this.props.endDate,
this.props,
)
: safeDateFormat(this.props.selected, this.props);

return React.cloneElement(customInput, {
[customInputRef]: (input) => {
Expand Down Expand Up @@ -1216,6 +1216,7 @@ export default class DatePicker extends React.Component {
renderClearButton = () => {
const {
isClearable,
disabled,
selected,
startDate,
endDate,
Expand All @@ -1230,7 +1231,12 @@ export default class DatePicker extends React.Component {
return (
<button
type="button"
className={`react-datepicker__close-icon ${clearButtonClassName}`.trim()}
className={classnames(
"react-datepicker__close-icon",
clearButtonClassName,
{ "react-datepicker__close-icon--disabled": disabled },
)}
disabled={disabled}
aria-label={ariaLabelClose}
onClick={this.onClearClick}
title={clearButtonTitle}
Expand Down
9 changes: 9 additions & 0 deletions src/stylesheets/datepicker.scss
Original file line number Diff line number Diff line change
Expand Up @@ -663,6 +663,15 @@
vertical-align: middle;
content: "\00d7";
}

&--disabled {
cursor: default;

&::after {
cursor: default;
background-color: $datepicker__muted-color;
}
}
}

.react-datepicker__today-button {
Expand Down
17 changes: 17 additions & 0 deletions test/datepicker_test.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -500,6 +500,23 @@ describe("DatePicker", () => {
expect(datePicker.state.inputValue).toBeNull();
});

it("should disable the clear button when the component is disabled", () => {
const onChange = jest.fn();
const { getByLabelText } = render(
<DatePicker
ariaLabelClose="clear"
disabled
selected={utils.newDate("2023-11-25")}
isClearable
onChange={onChange}
/>,
);
const clearButton = getByLabelText("clear");
expect(clearButton).toHaveProperty("disabled", true);
fireEvent.click(clearButton);
expect(onChange).not.toHaveBeenCalled();
});

it("should return focus to input when clear button is used", (done) => {
var div = document.createElement("div");
document.body.appendChild(div);
Expand Down

0 comments on commit d857179

Please sign in to comment.