From 0fab99fc1582f4fe99715a48b05d58d613159d5c Mon Sep 17 00:00:00 2001 From: DebugIsFalse <511418503@qq.com> Date: Sun, 10 Jul 2022 19:55:24 +0800 Subject: [PATCH 1/8] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E9=BB=98?= =?UTF-8?q?=E8=AE=A4=E9=80=89=E4=B8=AD=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/select/select.vue | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/select/select.vue b/src/components/select/select.vue index 35222ae08..2ee6bc510 100644 --- a/src/components/select/select.vue +++ b/src/components/select/select.vue @@ -5,6 +5,7 @@ v-click-outside:[capture].mousedown="onClickOutside" v-click-outside:[capture].touchstart="onClickOutside" > + {{focusIndex}}
0) { + _slotOptions = slotOptions.filter(item => item && item.proxy && item.proxy.isShow); + _focusIndex = 0; + } + if (_focusIndex === -1) { + return this.hideMenu(); + }; + const optionComponent = _slotOptions[_focusIndex]; // fix a script error when searching if (optionComponent) { const option = this.getOptionData(optionComponent.props.value); From a222375c6405217c4306e80a03647bce8989ed2c Mon Sep 17 00:00:00 2001 From: DebugIsFalse <511418503@qq.com> Date: Sun, 10 Jul 2022 20:28:10 +0800 Subject: [PATCH 2/8] fix: delete unusing code --- src/components/select/select.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/select/select.vue b/src/components/select/select.vue index 2ee6bc510..302e71637 100644 --- a/src/components/select/select.vue +++ b/src/components/select/select.vue @@ -5,7 +5,6 @@ v-click-outside:[capture].mousedown="onClickOutside" v-click-outside:[capture].touchstart="onClickOutside" > - {{focusIndex}}
Date: Sun, 10 Jul 2022 21:11:58 +0800 Subject: [PATCH 3/8] feat: has word will selected --- src/components/select/select.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/select/select.vue b/src/components/select/select.vue index 302e71637..9f70fd969 100644 --- a/src/components/select/select.vue +++ b/src/components/select/select.vue @@ -540,10 +540,10 @@ } // enter if (key === 'Enter') { - const { slotOptions, focusIndex } = this; + const { slotOptions, focusIndex, query } = this; let _slotOptions = slotOptions; let _focusIndex = focusIndex; - if (focusIndex === -1 && slotOptions.length > 0) { + if (focusIndex === -1 && slotOptions.length > 0 && query.length > 0) { _slotOptions = slotOptions.filter(item => item && item.proxy && item.proxy.isShow); _focusIndex = 0; } From c7975c7cb27f6c1f6ae2da3c3ab1fe905fc145f9 Mon Sep 17 00:00:00 2001 From: DebugIsFalse <511418503@qq.com> Date: Mon, 11 Jul 2022 10:42:01 +0800 Subject: [PATCH 4/8] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E4=B8=8B?= =?UTF-8?q?=E6=8B=89=E9=80=89=E4=B8=AD=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/select/select.vue | 29 ++++++++++++----------------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/src/components/select/select.vue b/src/components/select/select.vue index 9f70fd969..cd61f7e3c 100644 --- a/src/components/select/select.vue +++ b/src/components/select/select.vue @@ -299,7 +299,7 @@ values: [], dropDownWidth: 0, visible: false, - focusIndex: -1, + focusIndex: 0, isFocused: false, query: '', initialLabel: this.label, @@ -464,6 +464,7 @@ this.visible = typeof force !== 'undefined' ? force : !this.visible; if (this.visible){ + this.dropDownWidth = this.$el.getBoundingClientRect().width; this.$refs.dropdown.handleOnUpdatePopper(); } @@ -508,7 +509,7 @@ }, reset(){ this.query = ''; - this.focusIndex = -1; + this.focusIndex = 0; this.unchangedQuery = true; this.values = []; this.filterQueryChange = false; @@ -540,17 +541,9 @@ } // enter if (key === 'Enter') { - const { slotOptions, focusIndex, query } = this; - let _slotOptions = slotOptions; - let _focusIndex = focusIndex; - if (focusIndex === -1 && slotOptions.length > 0 && query.length > 0) { - _slotOptions = slotOptions.filter(item => item && item.proxy && item.proxy.isShow); - _focusIndex = 0; - } - if (_focusIndex === -1) { - return this.hideMenu(); - }; - const optionComponent = _slotOptions[_focusIndex]; + const { slotOptions, focusIndex } = this; + if (focusIndex === -1) return this.hideMenu(); + const optionComponent = slotOptions[focusIndex]; // fix a script error when searching if (optionComponent) { const option = this.getOptionData(optionComponent.props.value); @@ -578,7 +571,7 @@ let nearestActiveOption; // find first show option in case of set init focusIndex let firseIndex = null - if (direction > 0){ + if (direction >= 0){ nearestActiveOption = -1; for (let i = 0; i < slotOptions.length; i++){ const { proxy } = slotOptions[i]; @@ -762,9 +755,6 @@ } }, query (query) { - // when query word, set focusIndex init - this.focusIndex = -1; - this.$emit('on-query-change', query); const {remoteMethod, lastRemoteQuery} = this; const hasValidQuery = query !== '' && (query !== lastRemoteQuery || !lastRemoteQuery); @@ -781,6 +771,11 @@ } } if (this.visible) { + // when query word, set focusIndex init + if (this.values.length === 0) { + this.focusIndex = 0; + this.navigateOptions(0); + }; this.$refs.dropdown.handleOnUpdatePopper(); } if (query !== '' && this.remote) this.lastRemoteQuery = query; From 4125f4bcac159943d0ee36bfc4ed85025ab779a3 Mon Sep 17 00:00:00 2001 From: DebugIsFalse <511418503@qq.com> Date: Mon, 11 Jul 2022 11:45:24 +0800 Subject: [PATCH 5/8] Update select.vue --- src/components/select/select.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/select/select.vue b/src/components/select/select.vue index cd61f7e3c..07fc255a4 100644 --- a/src/components/select/select.vue +++ b/src/components/select/select.vue @@ -775,7 +775,10 @@ if (this.values.length === 0) { this.focusIndex = 0; this.navigateOptions(0); - }; + } else { + this.focusIndex = -1; + this.navigateOptions(-1); + } this.$refs.dropdown.handleOnUpdatePopper(); } if (query !== '' && this.remote) this.lastRemoteQuery = query; From f47ddbe608d629c0d475c8ce969616539c6f5dc0 Mon Sep 17 00:00:00 2001 From: DebugIsFalse <511418503@qq.com> Date: Mon, 25 Jul 2022 15:25:24 +0800 Subject: [PATCH 6/8] feat: add select default focusIndex = 0 --- src/components/select/select.vue | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/components/select/select.vue b/src/components/select/select.vue index 07fc255a4..242e46471 100644 --- a/src/components/select/select.vue +++ b/src/components/select/select.vue @@ -464,7 +464,7 @@ this.visible = typeof force !== 'undefined' ? force : !this.visible; if (this.visible){ - + this.dropDownWidth = this.$el.getBoundingClientRect().width; this.$refs.dropdown.handleOnUpdatePopper(); } @@ -542,7 +542,6 @@ // enter if (key === 'Enter') { const { slotOptions, focusIndex } = this; - if (focusIndex === -1) return this.hideMenu(); const optionComponent = slotOptions[focusIndex]; // fix a script error when searching if (optionComponent) { @@ -628,7 +627,6 @@ if (!opt) return false; return opt.props.value === option.value; }); - if (this.filterable){ const inputField = this.$el.querySelector('input[type="text"]'); if (!this.autoComplete) nextTick(() => inputField.focus()); @@ -772,12 +770,10 @@ } if (this.visible) { // when query word, set focusIndex init - if (this.values.length === 0) { + const { values, multiple, filterable } = this; + if (values.length === 0 || multiple || filterable) { this.focusIndex = 0; this.navigateOptions(0); - } else { - this.focusIndex = -1; - this.navigateOptions(-1); } this.$refs.dropdown.handleOnUpdatePopper(); } From d84f75fd1e5b191382fd918010026c5fd8dcca4b Mon Sep 17 00:00:00 2001 From: DebugIsFalse <511418503@qq.com> Date: Tue, 26 Jul 2022 11:58:04 +0800 Subject: [PATCH 7/8] feat: add focusIndex api --- src/components/select/select.vue | 46 +++++++++++++++++++++++++------- 1 file changed, 36 insertions(+), 10 deletions(-) diff --git a/src/components/select/select.vue b/src/components/select/select.vue index 242e46471..acc29c91e 100644 --- a/src/components/select/select.vue +++ b/src/components/select/select.vue @@ -260,6 +260,9 @@ } }, mounted () { + if (this.allowCreate) { + this.focusIndex = -1; + } // set the initial values if there are any if (!this.remote && this.slotOptions.length > 0){ this.values = this.getInitialValue().map(value => { @@ -314,7 +317,8 @@ filterQueryChange: false, // #4273 slotOptionsMap: new Map(), // fix Option hide, the model value cannot selected - isLocking: false + isLocking: false, + slotTimer: null }; }, computed: { @@ -514,6 +518,32 @@ this.values = []; this.filterQueryChange = false; }, + getFilterFocusIndex() { + const { slotOptions } = this; + let _focusIndex = 0; + const slotFirstIndex = slotOptions.findIndex((item) => item.proxy.isShow); + return slotFirstIndex === -1 ? _focusIndex : slotFirstIndex; + }, + changeSelectedFocusIndex() { + if (this.slotTimer || this.allowCreate) return; + // use setTimeout avoid to get slotOptions length wrong; + this.slotTimer = setTimeout(() => { + const { slotOptions, values, getFilterFocusIndex, remoteMethod } = this; + let _focusIndex = 0; + if (typeof remoteMethod === "function") { + _focusIndex = getFilterFocusIndex(); + } else if (values.length > 0) { + const lastSlotItem = values[values.length - 1]; + _focusIndex = slotOptions.findIndex((slotItem) => slotItem.proxy.value === lastSlotItem.value && slotItem.proxy.isShow); + } else { + _focusIndex = getFilterFocusIndex(); + } + if (_focusIndex === -1) _focusIndex = getFilterFocusIndex(); + this.focusIndex = _focusIndex; + clearTimeout(this.slotTimer); + this.slotTimer = null; + }); + }, handleKeydown (e) { const key = e.key || e.code; const keyCode = e.keyCode || e.which; @@ -754,7 +784,7 @@ }, query (query) { this.$emit('on-query-change', query); - const {remoteMethod, lastRemoteQuery} = this; + const {remoteMethod, lastRemoteQuery, filterable, visible, remote} = this; const hasValidQuery = query !== '' && (query !== lastRemoteQuery || !lastRemoteQuery); const shouldCallRemoteMethod = remoteMethod && hasValidQuery && !this.preventRemoteCall; this.preventRemoteCall = false; // remove the flag @@ -768,16 +798,12 @@ }); } } - if (this.visible) { - // when query word, set focusIndex init - const { values, multiple, filterable } = this; - if (values.length === 0 || multiple || filterable) { - this.focusIndex = 0; - this.navigateOptions(0); - } + // when query word, set focusIndex init + filterable && this.changeSelectedFocusIndex(); + if (visible) { this.$refs.dropdown.handleOnUpdatePopper(); } - if (query !== '' && this.remote) this.lastRemoteQuery = query; + if (query !== '' && remote) this.lastRemoteQuery = query; }, isFocused (focused) { const el = this.filterable ? this.$el.querySelector('input[type="text"]') : this.$el; From d965598b8de0dd802b8eaff2665ebc29fe69a4b1 Mon Sep 17 00:00:00 2001 From: DebugIsFalse <511418503@qq.com> Date: Tue, 26 Jul 2022 14:37:25 +0800 Subject: [PATCH 8/8] update Select example #145 --- examples/routers/select.vue | 84 ++++++++++++++++++++++++++++++++++++- 1 file changed, 82 insertions(+), 2 deletions(-) diff --git a/examples/routers/select.vue b/examples/routers/select.vue index 2b8188934..6b75a751d 100644 --- a/examples/routers/select.vue +++ b/examples/routers/select.vue @@ -7,6 +7,32 @@ + + + + + + + +
\ No newline at end of file +