diff --git a/packages/fractal/src/components/InputDate/InputDate.tsx b/packages/fractal/src/components/InputDate/InputDate.tsx index e53e6357e..375014e11 100644 --- a/packages/fractal/src/components/InputDate/InputDate.tsx +++ b/packages/fractal/src/components/InputDate/InputDate.tsx @@ -82,6 +82,8 @@ export const InputDate = forwardRef( name, onChange, onFieldChange, + onKeyDown, + onKeyUp, placeholders, readOnly = false, required = false, @@ -294,6 +296,10 @@ export const InputDate = forwardRef( default: break } + + if (isFunction(onKeyDown)) { + onKeyDown(event, type) + } } return ( @@ -337,6 +343,9 @@ export const InputDate = forwardRef( onChange={(event, newDay) => handleChange(event, newDay, 'day')} onFocus={handleFocus} onKeyDown={(event) => handleKeyDown(event, 'day')} + {...(isFunction(onKeyUp) + ? { onKeyUp: (event) => onKeyUp(event, 'day') } + : {})} /> ( } onFocus={handleFocus} onKeyDown={(event) => handleKeyDown(event, 'month')} + {...(isFunction(onKeyUp) + ? { onKeyUp: (event) => onKeyUp(event, 'month') } + : {})} /> ( onChange={(event, newYear) => handleChange(event, newYear, 'year')} onFocus={handleFocus} onKeyDown={(event) => handleKeyDown(event, 'year')} + {...(isFunction(onKeyUp) + ? { onKeyUp: (event) => onKeyUp(event, 'year') } + : {})} /> diff --git a/packages/fractal/src/components/InputDate/InputDate.types.ts b/packages/fractal/src/components/InputDate/InputDate.types.ts index e1068bceb..e89a665a9 100644 --- a/packages/fractal/src/components/InputDate/InputDate.types.ts +++ b/packages/fractal/src/components/InputDate/InputDate.types.ts @@ -1,4 +1,4 @@ -import { ChangeEvent, HTMLAttributes } from 'react' +import type { ChangeEvent, HTMLAttributes, KeyboardEvent } from 'react' export type DateFormat = { day?: number | undefined @@ -27,7 +27,7 @@ export type CombinedRefs = { export interface InputDateProps extends Omit< HTMLAttributes, - 'defaultValue' | 'onChange' | 'placeholder' + 'defaultValue' | 'onChange' | 'onKeyDown' | 'onKeyUp' | 'placeholder' > { /** Indicates if the day field must be focused on render. */ autoFocus?: boolean @@ -80,6 +80,17 @@ export interface InputDateProps type: keyof DateFormat, newDay: number, ) => void + /** Event handler when a key is pressed down in one of the fields. */ + onKeyDown: ( + event: KeyboardEvent, + type: keyof DateFormat, + ) => void + + /** Event handler when a key is released in one of the fields. */ + onKeyUp: ( + event: KeyboardEvent, + type: keyof DateFormat, + ) => void /** * A string to display in each of the date field when the value is * empty.