Add auto focus on react-datepicker input field

opencast · Dec 6, 2024 · d01b7cc · d01b7cc
1 parent 27ff91f
commit d01b7cc
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 10 deletions.
diff --git a/src/components/shared/TableFilters.tsx b/src/components/shared/TableFilters.tsx
@@ -426,8 +426,7 @@ const FilterSwitch = ({
 				<div>
 					<DatePicker
 						startOpen
-						showIcon
-						icon="fa fa-calendar"
+						autoFocus
 						selected={startDate}
 						onChange={(dates) => handleDate(dates)}
 						startDate={startDate}

diff --git a/src/components/shared/wizard/RenderField.tsx b/src/components/shared/wizard/RenderField.tsx
@@ -181,15 +181,13 @@ const EditableDateValue = ({
 }) => editMode ? (
 	<div>
 		<DatePicker
-			showIcon
+			autoFocus
 			selected={typeof field.value === "string" ? parseISO(field.value) : field.value}
 			onChange={(value) => setFieldValue(field.name, value)}
 			onClickOutside={() => setEditMode(false)}
-			onBlur={() => setEditMode(false)}
 			showTimeInput
 			dateFormat="Pp"
-			startOpen
-			popperPlacement="bottom"
+			popperPlacement="bottom-start"
 			popperClassName="datepicker-custom"
 			className="datepicker-custom-input"
 			wrapperClassName="datepicker-custom-wrapper"
@@ -386,16 +384,14 @@ const EditableSingleValueTime = ({
 	return editMode ? (
 		<div>
 			<DatePicker
-				showIcon
+				autoFocus
 				selected={typeof field.value === "string" ? parseISO(field.value) : field.value}
 				onChange={(value) => setFieldValue(field.name, value)}
 				onClickOutside={() => setEditMode(false)}
-				onBlur={() => setEditMode(false)}
 				showTimeSelect
       			showTimeSelectOnly
 				dateFormat="p"
-				startOpen
-				popperPlacement="bottom"
+				popperPlacement="bottom-start"
 				popperClassName="datepicker-custom"
 				className="datepicker-custom-input"
 				wrapperClassName="datepicker-custom-wrapper"