Skip to content

Commit

Permalink
Improve focus with portals
Browse files Browse the repository at this point in the history
Using portals, tab moves focus out of datepicker but leaves portal open.
Without portal, user can still enter the picker with arrow keys.

Tabbing through the datepicker should not land the user into a tab trap.

closes Hacker0x01#3522
  • Loading branch information
Sam-Apostel committed Sep 11, 2023
1 parent 21bfd83 commit a897b1a
Showing 1 changed file with 18 additions and 18 deletions.
36 changes: 18 additions & 18 deletions src/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ export default class DatePicker extends React.Component {
PropTypes.shape({
start: PropTypes.instanceOf(Date),
end: PropTypes.instanceOf(Date),
})
}),
),
filterDate: PropTypes.func,
fixedHeight: PropTypes.bool,
Expand Down Expand Up @@ -369,7 +369,7 @@ export default class DatePicker extends React.Component {

return [...accumulator, { ...holiday, date }];
},
[]
[],
);

const defaultPreSelection = this.getPreSelection();
Expand Down Expand Up @@ -440,10 +440,10 @@ export default class DatePicker extends React.Component {
!skipSetBlur && this.setBlur();

this.setState({ inputValue: null });
}
},
);
}
}
},
);
};
inputOk = () => isDate(this.state.preSelection);
Expand Down Expand Up @@ -515,7 +515,7 @@ export default class DatePicker extends React.Component {
this.props.dateFormat,
this.props.locale,
this.props.strictParsing,
this.props.minDate
this.props.minDate,
);
// Use date from `selected` prop when manipulating only time for input value
if (
Expand Down Expand Up @@ -548,7 +548,7 @@ export default class DatePicker extends React.Component {
this.setState({ preventFocus: true }, () => {
this.preventFocusTimeout = setTimeout(
() => this.setState({ preventFocus: false }),
50
50,
);
return this.preventFocusTimeout;
});
Expand Down Expand Up @@ -661,7 +661,7 @@ export default class DatePicker extends React.Component {
isValidDateSelection = isDayInRange(
date,
this.props.minDate,
this.props.maxDate
this.props.maxDate,
);
} else if (hasMinDate) {
const minDateStartOfDay = startOfDay(this.props.minDate);
Expand Down Expand Up @@ -742,7 +742,7 @@ export default class DatePicker extends React.Component {
const selectedDay =
this.calendar.componentNode &&
this.calendar.componentNode.querySelector(
'.react-datepicker__day[tabindex="0"]'
'.react-datepicker__day[tabindex="0"]',
);
selectedDay && selectedDay.focus({ preventScroll: true });

Expand All @@ -764,7 +764,7 @@ export default class DatePicker extends React.Component {
} else if (eventKey === "Escape") {
event.preventDefault();
this.setOpen(false);
} else if (eventKey === "Tab" && event.shiftKey) {
} else if (eventKey === "Tab") {
this.setOpen(false);
}

Expand All @@ -788,7 +788,7 @@ export default class DatePicker extends React.Component {
this.setFocus();
this.setState({ preventFocus: false });
});
}
},
);
}
};
Expand Down Expand Up @@ -889,7 +889,7 @@ export default class DatePicker extends React.Component {
this.setFocus();
this.setState({ preventFocus: false });
});
}
},
);
}
};
Expand Down Expand Up @@ -1072,7 +1072,7 @@ export default class DatePicker extends React.Component {
{
dateFormat: longDateFormat,
locale,
}
},
)}. ${
this.props.endDate
? "End date: " +
Expand All @@ -1086,33 +1086,33 @@ export default class DatePicker extends React.Component {
if (this.props.showTimeSelectOnly) {
ariaLiveMessage = `Selected time: ${safeDateFormat(
this.props.selected,
{ dateFormat, locale }
{ dateFormat, locale },
)}`;
} else if (this.props.showYearPicker) {
ariaLiveMessage = `Selected year: ${safeDateFormat(
this.props.selected,
{ dateFormat: "yyyy", locale }
{ dateFormat: "yyyy", locale },
)}`;
} else if (this.props.showMonthYearPicker) {
ariaLiveMessage = `Selected month: ${safeDateFormat(
this.props.selected,
{ dateFormat: "MMMM yyyy", locale }
{ dateFormat: "MMMM yyyy", locale },
)}`;
} else if (this.props.showQuarterYearPicker) {
ariaLiveMessage = `Selected quarter: ${safeDateFormat(
this.props.selected,
{
dateFormat: "yyyy, QQQ",
locale,
}
},
)}`;
} else {
ariaLiveMessage = `Selected date: ${safeDateFormat(
this.props.selected,
{
dateFormat: longDateFormat,
locale,
}
},
)}`;
}
}
Expand Down Expand Up @@ -1144,7 +1144,7 @@ export default class DatePicker extends React.Component {
? safeDateRangeFormat(
this.props.startDate,
this.props.endDate,
this.props
this.props,
)
: safeDateFormat(this.props.selected, this.props);

Expand Down

0 comments on commit a897b1a

Please sign in to comment.