diff --git a/components/trigger/Popup.vue b/components/trigger/Popup.vue index 1d9961a46..e50d39a7f 100644 --- a/components/trigger/Popup.vue +++ b/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({ diff --git a/components/trigger/index.vue b/components/trigger/index.vue index 691d5c127..ae12fd8ea 100644 --- a/components/trigger/index.vue +++ b/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 ( { 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() - if (!this.disabled) { - this.setOpenState(!this.sOpen, !this.sOpen) - } + // e.stopPropagation() + // if (!this.disabled) { + // 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 (
{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, + ), }, })}