Merge branch 'master' of https://github.com/vueComponent/ant-design

components/trigger/Popup.vue

@@ -22,6 +22,7 @@ export default {
     mask: PropTypes.bool,
     zIndex: PropTypes.number,
     popupClassName: PropTypes.any,
+    popupStyle: PropTypes.object.def({}),
   },
   data () {
     return {
@@ -99,7 +100,7 @@ export default {
     },
     getPopupElement () {
       const { $props: props, $slots, $listeners, getTransitionName } = this
-      const { align, visible, prefixCls, animation } = props
+      const { align, visible, prefixCls, animation, popupStyle } = props
       const { mouseenter, mouseleave } = $listeners
       const className = this.getClassName(props.getClassNameFromAlign(align))
       // const hiddenClassName = `${prefixCls}-hidden`
@@ -115,7 +116,7 @@ export default {
           mouseleave: mouseleave || noop,
         },
         ref: 'popupInstance',
-        style: { ...this.getZIndexStyle() },
+        style: { ...this.getZIndexStyle(), ...popupStyle },
       }
       const transitionProps = {
         props: Object.assign({

components/trigger/index.vue

@@ -340,12 +340,12 @@ export default {
           },
           el: div,
           render () {
-            const { popupStyle, popupEvents, ...otherProps } = this.popupProps
+            const { popupEvents, ...otherProps } = this.popupProps
             const p = {
               props: otherProps,
               on: popupEvents,
               ref: 'popup',
-              style: popupStyle,
+              // style: popupStyle,
             }
             return (
               <Popup

components/vc-select/Select.vue

@@ -31,6 +31,7 @@ import {
 } from './util'
 import SelectTrigger from './SelectTrigger'
 import { SelectPropTypes } from './PropTypes'
+import { setTimeout } from 'timers'
 
 function noop () {}
 
@@ -94,13 +95,15 @@ export default {
     if (sOpen === undefined) {
       sOpen = defaultOpen
     }
-    this.adjustOpenState()
     return {
       sValue,
       inputValue,
       sOpen,
     }
   },
+  beforeMount () {
+    // this.adjustOpenState()
+  },
   mounted () {
     this.$nextTick(() => {
       this.autoFocus && this.focus()
@@ -144,7 +147,10 @@ export default {
       }
     })
   },
-
+  beforeUpdate () {
+    // console.log('beforeUpdate')
+    // this.adjustOpenState()
+  },
   beforeDestroy () {
     this.clearFocusTime()
     this.clearBlurTime()
@@ -195,12 +201,12 @@ export default {
 
     // combobox ignore
     onKeyDown (event) {
-      const { disabled, sOpen } = this
+      const { disabled, openStatus } = this
       if (disabled) {
         return
       }
       const keyCode = event.keyCode
-      if (sOpen && !this.getInputDOMNode()) {
+      if (openStatus && !this.getInputDOMNode()) {
         this.onInputKeydown(event)
       } else if (keyCode === KeyCode.ENTER || keyCode === KeyCode.DOWN) {
         this.setOpenState(true)
@@ -209,7 +215,7 @@ export default {
     },
 
     onInputKeydown (event) {
-      const { disabled, sOpen, sValue, $props } = this
+      const { disabled, openStatus, sValue, $props } = this
       if (disabled) {
         return
       }
@@ -226,14 +232,14 @@ export default {
         return
       }
       if (keyCode === KeyCode.DOWN) {
-        if (!sOpen) {
+        if (!openStatus) {
           this.openIfHasChildren()
           event.preventDefault()
           event.stopPropagation()
           return
         }
       } else if (keyCode === KeyCode.ESC) {
-        if (sOpen) {
+        if (openStatus) {
           this.setOpenState(false)
           event.preventDefault()
           event.stopPropagation()
@@ -241,7 +247,7 @@ export default {
         return
       }
 
-      if (sOpen) {
+      if (openStatus) {
         const menu = this.$refs.selectTriggerRef.getInnerMenu()
         if (menu && menu.onKeyDown(event, this.handleBackfill)) {
           event.preventDefault()
@@ -315,19 +321,23 @@ export default {
     },
 
     onArrowClick (e) {
-      e.stopPropagation()
+      // e.stopPropagation()
-      if (!this.disabled) {
+      // if (!this.disabled) {
-        this.setOpenState(!this.sOpen, !this.sOpen)
+      //   this.setOpenState(!this.openStatus, !this.openStatus)
-      }
+      // }
     },
 
-    onPlaceholderClick () {
+    onPlaceholderClick (e) {
+      if (this._focused) {
+        e.stopPropagation()
+      }
       if (this.getInputDOMNode()) {
         this.getInputDOMNode().focus()
       }
     },
 
     onOuterFocus (e) {
+      console.log('onOuterFocus')
       if (this.disabled) {
         e.preventDefault()
         return
@@ -386,7 +396,7 @@ export default {
         // why not use setState?
           this.inputValue = this.getInputDOMNode().value = ''
         }
-        this._emit('blur', this.getVLForOnChange(sValue))
+        this.__emit('blur', this.getVLForOnChange(sValue))
         this.setOpenState(false)
       }, 10)
     },
@@ -528,7 +538,21 @@ export default {
       }
       return null
     },
-
+    inputClick (e) {
+      if (this._focused) {
+        e.stopPropagation()
+      }
+    },
+    inputBlur (e) {
+      // console.log(e.target)
+      this.clearBlurTime()
+      this.blurTimer = setTimeout(() => {
+        this.onOuterBlur()
+        if (!this.disabled) {
+          this.setOpenState(!this.openStatus, !this.openStatus)
+        }
+      }, 10)
+    },
     _getInputElement () {
       const props = this.$props
       const inputElement = props.getInputElement
@@ -537,15 +561,15 @@ export default {
       const inputCls = classnames(getClass(inputElement), {
         [`${props.prefixCls}-search__field`]: true,
       })
+      const inputEvents = getEvents(inputElement)
       // https://github.com/ant-design/ant-design/issues/4992#issuecomment-281542159
       // Add space to the end of the inputValue as the width measurement tolerance
       return (
         <div class={`${props.prefixCls}-search__field__wrap`}>
           {cloneElement(inputElement, {
-            props: {
+            attrs: {
               value: this.inputValue,
               disabled: props.disabled,
-
             },
             class: inputCls,
             ref: 'inputRef',
@@ -553,9 +577,21 @@ export default {
               input: this.onInputChange,
               keydown: chaining(
                 this.onInputKeydown,
-                getEvents(inputElement).keydown || noop,
+                inputEvents.keydown || noop,
                 this.$listeners.inputKeydown
               ),
+              // focus: chaining(
+              //   this.onOuterFocus,
+              //   inputEvents.focus || noop,
+              // ),
+              blur: chaining(
+                this.inputBlur,
+                inputEvents.blur || noop,
+              ),
+              click: chaining(
+                this.inputClick,
+                inputEvents.click || noop,
+              ),
             },
           })}
           <span
@@ -587,8 +623,8 @@ export default {
     },
 
     setOpenState (open, needFocus) {
-      const { $props: props, $data: state } = this
+      const { $props: props, openStatus } = this
-      if (state.sOpen === open) {
+      if (openStatus === open) {
         this.maybeFocus(open, needFocus)
         return
       }
@@ -858,7 +894,9 @@ export default {
       // If hidden menu due to no options, then it should be calculated again
       if (sOpen || this.hiddenForNoOptions) {
         options = this.renderFilterOptions()
+        console.log('options', options)
       }
+      console.log('options1', options)
       this._options = options
 
       if (isMultipleOrTagsOrCombobox($props) || !showSearch) {
@@ -874,7 +912,39 @@ export default {
       }
       this.sOpen = sOpen
     },
+    getOptionsAndOpenStatus () {
+      let sOpen = this.sOpen
+      if (this.skipAdjustOpen) {
+        return {
+          option: this._options,
+          open: sOpen,
+        }
+      }
+      const { $props, showSearch } = this
+      let options = []
+      // If hidden menu due to no options, then it should be calculated again
+      if (true || sOpen || this.hiddenForNoOptions) {
+        options = this.renderFilterOptions()
+      }
+      this._options = options
 
+      if (isMultipleOrTagsOrCombobox($props) || !showSearch) {
+        if (sOpen && !options.length) {
+          sOpen = false
+          this.hiddenForNoOptions = true
+        }
+        // Keep menu open if there are options and hidden for no options before
+        if (this.hiddenForNoOptions && options.length) {
+          sOpen = true
+          this.hiddenForNoOptions = false
+        }
+      }
+      this.openStatus = sOpen
+      return {
+        options,
+        open: sOpen,
+      }
+    },
     renderFilterOptions () {
       const { inputValue } = this
       const { $slots, tags, filterOption, notFoundContent } = this
@@ -1030,8 +1100,8 @@ export default {
       return sel
     },
 
-    renderTopControlNode () {
+    renderTopControlNode (openStatus) {
-      const { sValue, sOpen, inputValue, $props: props } = this
+      const { sValue, inputValue, $props: props } = this
       const {
         choiceTransitionName,
         prefixCls,
@@ -1051,7 +1121,7 @@ export default {
           if (!showSearch) {
             showSelectedValue = true
           } else {
-            if (sOpen) {
+            if (openStatus) {
               showSelectedValue = !inputValue
               if (showSelectedValue) {
                 opacity = 0.4
@@ -1084,7 +1154,7 @@ export default {
               class={`${prefixCls}-search ${prefixCls}-search--inline`}
               key='input'
               style={{
-                display: sOpen ? 'block' : 'none',
+                display: openStatus ? 'block' : 'none',
               }}
             >
               {this._getInputElement()}
@@ -1165,7 +1235,7 @@ export default {
         if (isMultipleOrTags(props) && choiceTransitionName) {
           const transitionProps = getTransitionProps(choiceTransitionName, {
             tag: 'ul',
-            afterLeave: this.onChoiceAnimationLeave,
+            // beforeEnter: this.onChoiceAnimationLeave,
           })
           innerNode = (
             <transition-group
@@ -1219,16 +1289,26 @@ export default {
       }
       return null
     },
+    rootRefClick (e) {
+      // e.stopPropagation()
+      if (this._focused) {
+        // this.getInputDOMNode().blur()
+        this.onOuterBlur()
+      } else {
+        this.onOuterFocus()
+        // this.getInputDOMNode().focus()
+      }
+    },
   },
 
   render () {
     const props = this.$props
     const multiple = isMultipleOrTags(props)
-    const { disabled, prefixCls, sOpen, inputValue, sValue, $listeners } = this
+    const { options, open: openStatus } = this.getOptionsAndOpenStatus()
+    const { disabled, prefixCls, inputValue, sValue, $listeners } = this
     const { mouseenter = noop, mouseleave = noop, popupScroll = noop } = $listeners
-    const ctrlNode = this.renderTopControlNode()
+    const ctrlNode = this.renderTopControlNode(openStatus)
     let extraSelectionProps = {}
-    const options = this._options
     if (!isMultipleOrTagsOrCombobox(props)) {
       extraSelectionProps = {
         onKeyDown: this.onKeyDown,
@@ -1237,13 +1317,14 @@ export default {
     }
     const rootCls = {
       [prefixCls]: 1,
-      [`${prefixCls}-open`]: sOpen,
+      [`${prefixCls}-open`]: openStatus,
-      [`${prefixCls}-focused`]: sOpen || !!this._focused,
+      [`${prefixCls}-focused`]: openStatus || !!this._focused,
       [`${prefixCls}-combobox`]: isCombobox(props),
       [`${prefixCls}-disabled`]: disabled,
       [`${prefixCls}-enabled`]: !disabled,
       [`${prefixCls}-allow-clear`]: !!props.allowClear,
     }
+    console.log(options)
     return (
       <SelectTrigger
         dropdownAlign={props.dropdownAlign}
@@ -1260,7 +1341,7 @@ export default {
         options={options}
         multiple={multiple}
         disabled={disabled}
-        visible={sOpen}
+        visible={openStatus}
         inputValue={inputValue}
         value={sValue}
         firstActiveValue={props.firstActiveValue}
@@ -1277,8 +1358,9 @@ export default {
       >
         <div
           ref='rootRef'
-          onBlur={this.onOuterBlur}
+          // onBlur={this.onOuterBlur}
-          onFocus={this.onOuterFocus}
+          // onFocus={this.onOuterFocus}
+          onClick={this.rootRefClick}
           class={classnames(rootCls)}
         >
           <div
@@ -1289,8 +1371,9 @@ export default {
             role='combobox'
             aria-autocomplete='list'
             aria-haspopup='true'
-            aria-expanded={sOpen}
+            aria-expanded={openStatus}
             {...extraSelectionProps}
+            // onClick={this.stopPropagation}
           >
             {ctrlNode}
             {this.renderClear()}

components/vc-select/SelectTrigger.vue

@@ -49,6 +49,7 @@ export default {
     value: PropTypes.array,
     // children: PropTypes.any,
     showAction: PropTypes.arrayOf(PropTypes.string),
+    combobox: PropTypes.bool,
   },
   data () {
     return {
@@ -176,7 +177,6 @@ export default {
         builtinPlacements: BUILT_IN_PLACEMENTS,
         prefixCls: dropdownPrefixCls,
         popupTransitionName: this.getDropdownTransitionName(),
-        popup: popupElement,
         popupAlign: dropdownAlign,
         popupVisible: visible,
         getPopupContainer,
@@ -191,6 +191,9 @@ export default {
     return (
       <Trigger {...triggerProps}>
         {$slots.default}
+        <template slot='popup'>
+          {popupElement}
+        </template>
       </Trigger>
     )
   },