fix: Add missing size on input (#726)

* chore: add missing size

* test: update snapshot

* fix: typescript

docs/examples/debug.tsx

@@ -150,7 +150,11 @@ export default () => {
         // Shared
         {...sharedLocale}
         showTime
-        // format={(val) => val.format('YYYY-MM-DD')}
+        format={(val) => val.format('YYYY-MM-DD')}
+        // format={{
+        //   format: 'YYYY-MM-DD',
+        //   align: true,
+        // }}
         presets={[
           {
             label: 'Good',

src/PickerInput/Selector/hooks/useInputProps.ts

@@ -27,6 +27,7 @@ export default function useInputProps<DateType extends object = any>(
     | 'name'
     | 'autoComplete'
     | 'open'
+    | 'picker'
   > & {
     id?: string | string[];
     value?: DateType[];
@@ -71,6 +72,8 @@ export default function useInputProps<DateType extends object = any>(
     disabled,
     activeIndex,
     allHelp,
+
+    picker,
   } = props;
 
   // ======================== Parser ========================
@@ -94,6 +97,16 @@ export default function useInputProps<DateType extends object = any>(
 
   const valueTexts = React.useMemo(() => value.map(getText), [value, getText]);
 
+  // ========================= Size =========================
+  const size = React.useMemo(() => {
+    const defaultSize = picker === 'time' ? 8 : 10;
+    const length =
+      typeof firstFormat === 'function'
+        ? firstFormat(generateConfig.getNow()).length
+        : firstFormat.length;
+    return Math.max(defaultSize, length) + 2;
+  }, [firstFormat, picker, generateConfig]);
+
   // ======================= Validate =======================
   const validateFormat = (text: string) => {
     for (let i = 0; i < format.length; i += 1) {
@@ -140,6 +153,8 @@ export default function useInputProps<DateType extends object = any>(
 
       autoComplete,
 
+      size,
+
       // ============= By Index =============
       id: getProp(id),
 

src/PickerInput/hooks/useFilledProps.ts

@@ -2,7 +2,7 @@ import { warning } from 'rc-util';
 import * as React from 'react';
 import { fillLocale } from '../../hooks/useLocale';
 import { getTimeConfig } from '../../hooks/useTimeConfig';
-import type { FormatType, InternalMode } from '../../interface';
+import type { FormatType, InternalMode, PickerMode } from '../../interface';
 import { toArray } from '../../utils/miscUtil';
 import type { RangePickerProps } from '../RangePicker';
 import { fillClearIcon } from '../Selector/hooks/useClearIcon';
@@ -78,6 +78,7 @@ export default function useFilledProps<
 ): [
   filledProps: Omit<InProps, keyof UpdaterProps | 'showTime' | 'value' | 'defaultValue'> &
     UpdaterProps & {
+      picker: PickerMode;
       showTime?: ExcludeBooleanType<InProps['showTime']>;
       value?: ToArrayType<InProps['value'], DateType>;
       defaultValue?: ToArrayType<InProps['value'], DateType>;

src/interface.tsx

@@ -446,6 +446,8 @@ export interface OpenConfig {
 
 export type OnOpenChange = (open: boolean, config?: OpenConfig) => void;
 export interface SelectorProps<DateType = any> extends SharedHTMLAttrs {
+  picker: PickerMode;
+
   clearIcon?: React.ReactNode;
   suffixIcon?: React.ReactNode;
   className?: string;

src/utils/uiUtil.ts

@@ -1,7 +1,6 @@
+import isVisible from 'rc-util/lib/Dom/isVisible';
 import KeyCode from 'rc-util/lib/KeyCode';
 import raf from 'rc-util/lib/raf';
-import isVisible from 'rc-util/lib/Dom/isVisible';
-import type { GenerateConfig } from '../generate';
 import type { CustomFormat, PanelMode, PickerMode } from '../interface';
 
 const scrollIds = new Map<HTMLElement, number>();
@@ -181,17 +180,6 @@ export function getDefaultFormat<DateType>(
   return mergedFormat;
 }
 
-export function getInputSize<DateType>(
-  picker: PickerMode | undefined,
-  format: string | CustomFormat<DateType>,
-  generateConfig: GenerateConfig<DateType>,
-) {
-  const defaultSize = picker === 'time' ? 8 : 10;
-  const length =
-    typeof format === 'function' ? format(generateConfig.getNow()).length : format.length;
-  return Math.max(defaultSize, length) + 2;
-}
-
 // ===================== Window =====================
 type ClickEventHandler = (event: MouseEvent) => void;
 let globalClickFunc: ClickEventHandler | null = null;

tests/__snapshots__/picker.spec.tsx.snap

@@ -7,6 +7,7 @@ exports[`Picker.Basic icon 1`] = `
   <input
     aria-invalid="false"
     autocomplete="off"
+    size="12"
     value="1990-09-03"
   />
   <span
@@ -35,6 +36,7 @@ exports[`Picker.Basic inputRender 1`] = `
     aria-invalid="false"
     autocomplete="off"
     data-customize="yes"
+    size="12"
     value=""
   />
 </div>
@@ -50,6 +52,7 @@ exports[`Picker.Basic panelRender 1`] = `
     <input
       aria-invalid="false"
       autocomplete="off"
+      size="12"
       value=""
     />
   </div>
@@ -70,6 +73,7 @@ exports[`Picker.Basic pass data- & aria- & role 1`] = `
         autocomplete="off"
         data-test="233"
         role="search"
+        size="12"
         value=""
       />
     </div>
@@ -88,6 +92,7 @@ exports[`Picker.Basic should render correctly in rtl 1`] = `
       <input
         aria-invalid="false"
         autocomplete="off"
+        size="12"
         value=""
       />
     </div>

tests/__snapshots__/range.spec.tsx.snap

@@ -12,6 +12,7 @@ exports[`Picker.Range icon 1`] = `
         aria-invalid="false"
         autocomplete="off"
         date-range="start"
+        size="12"
         value="1990-09-03"
       />
     </div>
@@ -27,6 +28,7 @@ exports[`Picker.Range icon 1`] = `
         aria-invalid="false"
         autocomplete="off"
         date-range="end"
+        size="12"
         value="1990-09-03"
       />
     </div>
@@ -65,6 +67,7 @@ exports[`Picker.Range onPanelChange is array args should render correctly in rtl
         aria-invalid="false"
         autocomplete="off"
         date-range="start"
+        size="12"
         value=""
       />
     </div>
@@ -80,6 +83,7 @@ exports[`Picker.Range onPanelChange is array args should render correctly in rtl
         aria-invalid="false"
         autocomplete="off"
         date-range="end"
+        size="12"
         value=""
       />
     </div>
@@ -104,6 +108,7 @@ exports[`Picker.Range panelRender 1`] = `
           aria-invalid="false"
           autocomplete="off"
           date-range="start"
+          size="12"
           value=""
         />
       </div>
@@ -119,6 +124,7 @@ exports[`Picker.Range panelRender 1`] = `
           aria-invalid="false"
           autocomplete="off"
           date-range="end"
+          size="12"
           value=""
         />
       </div>
@@ -168,6 +174,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
           aria-invalid="false"
           autocomplete="off"
           date-range="start"
+          size="12"
           value=""
         />
       </div>
@@ -183,6 +190,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
           aria-invalid="false"
           autocomplete="off"
           date-range="end"
+          size="12"
           value=""
         />
       </div>
@@ -1211,6 +1219,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
           aria-invalid="false"
           autocomplete="off"
           date-range="start"
+          size="12"
           value=""
         />
       </div>
@@ -1226,6 +1235,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
           aria-invalid="false"
           autocomplete="off"
           date-range="end"
+          size="12"
           value=""
         />
       </div>