DateInput: Open on focus

src/form/DateInput/DateInput.story.tsx

@@ -74,3 +74,9 @@ export const Range = () => {
     </Stack>
   );
 };
+
+export const OpenOnFocus = () => {
+  const [date, setDate] = useState<Date>(new Date());
+
+  return <DateInput fullWidth openOnFocus value={date} onChange={setDate} />;
+};

src/form/DateInput/DateInput.tsx

@@ -1,5 +1,6 @@
 import React, {
   ChangeEvent,
+  FocusEvent,
   FC,
   ReactElement,
   useCallback,
@@ -30,6 +31,11 @@ export type DateInputProps = Omit<InputProps, 'value' | 'onChange'> & {
    */
   placement?: Placement;
 
+  /**
+   * Open calendar on field focus
+   */
+  openOnFocus?: boolean;
+
   /**
    * Icon to show in open calendar button.
    */
@@ -53,7 +59,9 @@ export const DateInput: FC<DateInputProps> = ({
   placement = 'bottom-start',
   isRange,
   icon = <CalendarIcon />,
+  openOnFocus = true,
   onChange,
+  onFocus,
   ...rest
 }) => {
   const [open, setOpen] = useState<boolean>(false);
@@ -108,6 +116,16 @@ export const DateInput: FC<DateInputProps> = ({
     [format, isRange, onChange]
   );
 
+  const focusHandler = useCallback(
+    (e: FocusEvent<HTMLInputElement>) => {
+      if (openOnFocus) {
+        setOpen(true);
+      }
+      onFocus?.(e);
+    },
+    [onFocus, openOnFocus]
+  );
+
   useEffect(() => {
     if (value) {
       if (isRange) {
@@ -143,6 +161,7 @@ export const DateInput: FC<DateInputProps> = ({
         {...rest}
         value={inputValue}
         onChange={inputChangeHandler}
+        onFocus={focusHandler}
       />
       <Menu
         open={open}