Open YakinRojinegro opened 1 month ago
Describe the bug When setting the includeDates with an array of values is not disabling keyboard navigation for the "disabled" values. We have some custom CSS.
To Reproduce CSS:
.react-datepicker { border: none; .react-datepicker__day, .react-datepicker__day-name { margin: 0 20px 0 0; padding: 6px; height: 32px; width: 32px; box-sizing: border-box; text-align: center; &:focus-visible { outline: 2px solid #CCC; } } .react-datepicker__day--disabled { background: transparent; color: #d1d1d1; } .react-datepicker__day--disabled:hover { background-color: transparent; cursor: not-allowed; color: #d1d1d1; } }
JSX
// Add days function for sample Date.prototype.addDays = function (days: number) { const date = new Date(this.valueOf()); date.setDate(date.getDate() + days); return date; }; // Component () => { const [startDate, setStartDate] = useState<Date | null>(null); const arrTest = [ new Date().addDays(4), new Date().addDays(5), new Date().addDays(6), new Date().addDays(8), new Date().addDays(9), ]; return ( <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} includeDates={arrTest} inline minDate={arrTest[0]} /> ) }
Steps
Expected behavior The navigation should skip the element that is not active in the array meaning the day 7 shouldn't be focus
Screenshots
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context I'm following the guide provided here. package.json version: "@types/react-datepicker": "^4.3.2", "react-datepicker": "^4.8.0",
"@types/react-datepicker": "^4.3.2",
"react-datepicker": "^4.8.0",
Describe the bug When setting the includeDates with an array of values is not disabling keyboard navigation for the "disabled" values. We have some custom CSS.
To Reproduce CSS:
JSX
Steps
Expected behavior The navigation should skip the element that is not active in the array meaning the day 7 shouldn't be focus
Screenshots
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context I'm following the guide provided here. package.json version:
"@types/react-datepicker": "^4.3.2",
"react-datepicker": "^4.8.0",