Provide refs to make inputs focus when clicking preview, and update t…

…ype to match mui 6 components.
zetkin · Sep 12, 2023 · 58af978 · 58af978
1 parent ae0ae5d
commit 58af978
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/src/features/events/components/EventOverviewCard/index.tsx b/src/features/events/components/EventOverviewCard/index.tsx
@@ -126,10 +126,12 @@ const EventOverviewCard: FC<EventOverviewCardProps> = ({
               <Box flex={1}>
                 <ZUIPreviewableInput
                   {...previewableProps}
-                  renderInput={() => {
+                  renderInput={(params) => {
+                    params.ref;
                     return (
                       <DatePicker
                         format="DD-MM-YYYY"
+                        inputRef={params.ref}
                         label={messages.eventOverviewCard.startDate()}
                         onChange={(newStartDate) => {
                           if (newStartDate) {
@@ -161,12 +163,13 @@ const EventOverviewCard: FC<EventOverviewCardProps> = ({
                 />
                 <ZUIPreviewableInput
                   {...previewableProps}
-                  renderInput={() => {
+                  renderInput={(params) => {
                     return (
                       <TimeField
                         ampm={false}
                         format="HH:mm"
                         fullWidth
+                        inputRef={params.ref}
                         label={messages.eventOverviewCard.startTime()}
                         onChange={(newStartTime) => {
                           if (newStartTime) {
@@ -201,7 +204,7 @@ const EventOverviewCard: FC<EventOverviewCardProps> = ({
               >
                 <ZUIPreviewableInput
                   {...previewableProps}
-                  renderInput={() => {
+                  renderInput={(params) => {
                     return (
                       <>
                         {!showEndDate && (
@@ -219,6 +222,7 @@ const EventOverviewCard: FC<EventOverviewCardProps> = ({
                         {showEndDate && (
                           <DatePicker
                             format="DD-MM-YYYY"
+                            inputRef={params.ref}
                             label={messages.eventOverviewCard.endDate()}
                             minDate={dayjs(startDate)}
                             onChange={(newEndDate) => {
@@ -256,13 +260,14 @@ const EventOverviewCard: FC<EventOverviewCardProps> = ({
                 />
                 <ZUIPreviewableInput
                   {...previewableProps}
-                  renderInput={() => {
+                  renderInput={(params) => {
                     return (
                       <TimeField
                         ampm={false}
                         disableIgnoringDatePartForTimeValidation={true}
                         format="HH:mm"
                         fullWidth
+                        inputRef={params.ref}
                         label={messages.eventOverviewCard.endTime()}
                         minTime={dayjs(naiveStart).add(1, 'min')}
                         onChange={(newEndTime) => {

diff --git a/src/zui/ZUIPreviewableInput/index.tsx b/src/zui/ZUIPreviewableInput/index.tsx
@@ -1,5 +1,5 @@
 import { Box } from '@mui/material';
-import { HTMLProps, useEffect, useRef } from 'react';
+import { Ref, useEffect, useRef } from 'react';
 
 export enum ZUIPreviewableMode {
   EDITABLE = 'editable',
@@ -10,14 +10,14 @@ type ZUIPreviewableInputProps<ValueType, InputType> = {
   focusInitially?: boolean;
   mode: ZUIPreviewableMode;
   onSwitchMode?: (mode: ZUIPreviewableMode) => void;
-  renderInput: (props: HTMLProps<InputType>) => JSX.Element;
+  renderInput: (props: { ref: Ref<InputType> }) => JSX.Element;
   renderPreview?: () => JSX.Element;
   value: ValueType;
 };
 
 function ZUIPreviewableInput<
   ValueType extends string | number,
-  InputType extends HTMLElement
+  InputType extends HTMLInputElement
 >({
   focusInitially = false,
   mode,