fix: DatePicker

Fixed the issue where the component lost focus after selecting the date.
Fixed the issue that cause Safari to unresponsive.
Fixed the issue where WeekPicker's date selection box was not aligned with the input box.
add da_DK he_IL hu_HU id_ID

Author: tangjinzhou

components/date-picker/RangePicker.jsx

@@ -50,11 +50,12 @@ function fixLocale (value, localeCode) {
   if (!value || value.length === 0) {
     return
   }
-  if (value[0]) {
-    value[0].locale(localeCode)
+  const [start, end] = value
+  if (start) {
+    start.locale(localeCode)
   }
-  if (value[1]) {
-    value[1].locale(localeCode)
+  if (end) {
+    end.locale(localeCode)
   }
 }
 
@@ -73,9 +74,10 @@ export default {
   },
   data () {
     const value = this.value || this.defaultValue || []
+    const [start, end] = value
     if (
-      value[0] && !interopDefault(moment).isMoment(value[0]) ||
-      value[1] && !interopDefault(moment).isMoment(value[1])
+      start && !interopDefault(moment).isMoment(start) ||
+      end && !interopDefault(moment).isMoment(end)
     ) {
       throw new Error(
         'The value/defaultValue of RangePicker must be a moment object array after `[email protected]`, ' +
@@ -127,11 +129,11 @@ export default {
           sShowDate: getShowDateFromValue(value) || sShowDate,
         }))
       }
+      const [start, end] = value
       this.$emit('change', value, [
-        formatValue(value[0], this.format),
-        formatValue(value[1], this.format),
+        formatValue(start, this.format),
+        formatValue(end, this.format),
       ])
-      this.focus()
     },
 
     handleOpenChange (open) {
@@ -143,6 +145,10 @@ export default {
         this.clearHoverValue()
       }
       this.$emit('openChange', open)
+
+      if (!open) {
+        this.focus()
+      }
     },
 
     handleShowDateChange (showDate) {
@@ -160,7 +166,8 @@ export default {
     },
 
     handleCalendarInputSelect (value) {
-      if (!value[0]) {
+      const [start] = value
+      if (!start) {
         return
       }
       this.setState(({ sShowDate }) => ({
@@ -317,8 +324,8 @@ export default {
     if (props.showTime) {
       pickerStyle.width = '350px'
     }
-
-    const clearIcon = (!props.disabled && props.allowClear && value && (value[0] || value[1])) ? (
+    const [startValue, endValue] = value
+    const clearIcon = (!props.disabled && props.allowClear && value && (startValue || endValue)) ? (
       <Icon
         type='close-circle'
         class={`${prefixCls}-picker-clear`}
@@ -339,8 +346,7 @@ export default {
     )
 
     const input = ({ value: inputValue }) => {
-      const start = inputValue[0]
-      const end = inputValue[1]
+      const [start, end] = inputValue
       return (
         <span class={props.pickerInputClass}>
           <input

components/date-picker/WeekPicker.jsx

@@ -40,18 +40,22 @@ export default {
       )
     }
     return {
-      sValue: value,
+      _value: value,
+      _open: this.open,
     }
   },
   watch: {
     value (val) {
-      this.setState({ sValue: val })
+      this.setState({ _value: val })
+    },
+    open (val) {
+      this.setState({ _open: val })
     },
   },
 
   methods: {
     weekDateRender (current) {
-      const selectedValue = this.sValue
+      const selectedValue = this.$data._value
       const { prefixCls } = this
       if (selectedValue &&
         current.year() === selectedValue.year() &&
@@ -72,10 +76,19 @@ export default {
     },
     handleChange  (value) {
       if (!hasProp(this, 'value')) {
-        this.setState({ sValue: value })
+        this.setState({ _value: value })
       }
       this.$emit('change', value, formatValue(value, this.format))
-      this.focus()
+    },
+    handleOpenChange (open) {
+      if (!hasProp(this, 'open')) {
+        this.setState({ _open: open })
+      }
+      this.$emit('openChange', open)
+
+      if (!open) {
+        this.focus()
+      }
     },
     clearSelection (e) {
       e.preventDefault()
@@ -99,8 +112,9 @@ export default {
     const {
       prefixCls, disabled, pickerClass, popupStyle,
       pickerInputClass, format, allowClear, locale, localeCode, disabledDate,
-      sValue: pickerValue, $listeners, $scopedSlots,
+      $data, $listeners, $scopedSlots,
     } = this
+    const { _value: pickerValue, _open: open } = $data
     const { focus = noop, blur = noop } = $listeners
 
     if (pickerValue && localeCode) {
@@ -121,7 +135,7 @@ export default {
         disabledDate={disabledDate}
       />
     )
-    const clearIcon = (!disabled && allowClear && this.sValue) ? (
+    const clearIcon = (!disabled && allowClear && $data._value) ? (
       <Icon
         type='close-circle'
         class={`${prefixCls}-picker-clear`}
@@ -143,7 +157,7 @@ export default {
 
     const input = ({ value }) => {
       return (
-        <span>
+        <span style={{ display: 'inline-block', width: '100%' }}>
           <input
             ref='input'
             disabled={disabled}
@@ -165,10 +179,12 @@ export default {
         calendar,
         prefixCls: `${prefixCls}-picker-container`,
         value: pickerValue,
+        open,
       },
       on: {
         ...$listeners,
         change: this.handleChange,
+        openChange: this.handleOpenChange,
       },
       style: popupStyle,
     }

components/date-picker/__tests__/__snapshots__/WeekPicker.test.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`WeekPicker should support style prop 1`] = `<span class="ant-calendar-picker" style="width: 400px;"><span class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></span></span>`;
+exports[`WeekPicker should support style prop 1`] = `<span class="ant-calendar-picker" style="width: 400px;"><span class="" style="display: inline-block; width: 100%;"><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></span></span>`;