diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx
index 5d1c5a759..677007474 100644
--- a/docs/examples/debug.tsx
+++ b/docs/examples/debug.tsx
@@ -32,6 +32,10 @@ export default () => {
   const singleRef = React.useRef<PickerRef>(null);
 
   const [value, setValue] = React.useState<Moment>(null);
+  const [rangeValue, setRangeValue] = React.useState<[Moment?, Moment?]>([
+    moment('2000-01-01'),
+    null,
+  ]);
 
   return (
     <div>
@@ -39,7 +43,8 @@ export default () => {
       <br />
       <RangePicker
         {...sharedLocale}
-        value={[moment('2000-01-01'), null]}
+        // value={[moment('2000-01-01'), null]}
+        value={rangeValue}
         disabled={[true, false]}
         suffixIcon="🧶"
         // onFocus={() => {
@@ -59,6 +64,7 @@ export default () => {
         // showTime={{}}
         onChange={(val, text) => {
           console.log('🔥 Change:', val, text);
+          setRangeValue(val);
         }}
         onCalendarChange={(val, text, info) => {
           console.log('🎉 Calendar Change:', val, text, info);
diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx
index 042c80c5a..be3be96b0 100644
--- a/src/NewPicker/PickerInput/RangePicker.tsx
+++ b/src/NewPicker/PickerInput/RangePicker.tsx
@@ -261,7 +261,10 @@ export default function Picker<DateType = any>(props: RangePickerProps<DateType>
   // ======================== Click =========================
   const onSelectorClick: React.MouseEventHandler<HTMLDivElement> = () => {
     if (focusedIndex === null) {
-      selectorRef.current.focus(0);
+      const enabledIndex = mergedDisabled.findIndex((d) => !d);
+      if (enabledIndex >= 0) {
+        selectorRef.current.focus(enabledIndex);
+      }
     }
 
     setMergeOpen(true);
diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts
index 9d12ceb11..aee1c7a19 100644
--- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts
+++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts
@@ -59,9 +59,11 @@ export default function useRangeValue<DateType = any>(
   const mergedOrder = disabled.some((d) => d) ? false : order;
 
   // ============================ Values ============================
+  const [cachedDefaultValue] = React.useState(defaultValue);
+
   // Used for internal value management.
   // It should always use `mergedValue` in render logic
-  const [internalCalendarValue, setCalendarValue] = React.useState(defaultValue || value);
+  const [internalCalendarValue, setCalendarValue] = React.useState(cachedDefaultValue || value);
   const calendarValue = internalCalendarValue || [null, null];
 
   useLayoutUpdateEffect(() => {
@@ -133,8 +135,8 @@ export default function useRangeValue<DateType = any>(
       (!endEmpty || allowEmpty[1]);
 
     if (validateDateRange) {
-      // // Sync calendar value with current value
-      // setCalendarValue(value);
+      // Sync calendar value with current value
+      setCalendarValue(cachedDefaultValue || value);
 
       // Sync submit value to not to trigger `onChange` again
       setSubmitValue(clone);