From 25e075be69c5015c63f5f3c2e324bc00216456bc Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Tue, 24 Jan 2023 11:21:51 +0100 Subject: [PATCH 1/2] Date field: fix tabbing behavior --- .../src/components/Forms/Input/DateInput.vue | 31 +++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/panel/src/components/Forms/Input/DateInput.vue b/panel/src/components/Forms/Input/DateInput.vue index 24335e98d5..5646bf5f3f 100644 --- a/panel/src/components/Forms/Input/DateInput.vue +++ b/panel/src/components/Forms/Input/DateInput.vue @@ -281,6 +281,8 @@ export default { * => select the last affected part * d. cursor selection cover last part * => tab should blur the input, focus on next tabbale element + * e. cursor is at the end of the pattern + * => tab should blur the input, focus on next tabbale element * * @param {Event} event */ @@ -322,8 +324,33 @@ export default { this.selectNext(selection.index); } } else { - // select default part (step unit) - event.shiftKey ? this.selectLast() : this.selectFirst(); + // nothing or no part fully selected + if ( + this.$refs.input && + this.$refs.input.selectionStart == selection.end + 1 && + selection.index == this.pattern.parts.length - 1 + ) { + // cursor at the end of the pattern, jump out + return; + } + + // more than one part selected, select last affected part + else if ( + this.$refs.input && + this.$refs.input.selectionEnd - 1 > selection.end + ) { + const last = this.pattern.at( + this.$refs.input.selectionEnd, + this.$refs.input.selectionEnd + ); + + this.select(this.pattern.parts[last.index]); + } + + // select part where the cursor is located + else { + this.select(this.pattern.parts[selection.index]); + } } event.preventDefault(); From 7f83d4d09526de72a35b9d546974ce399a4371d0 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Tue, 24 Jan 2023 11:32:13 +0100 Subject: [PATCH 2/2] Date field: fix typo in comment --- panel/src/components/Forms/Input/DateInput.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/panel/src/components/Forms/Input/DateInput.vue b/panel/src/components/Forms/Input/DateInput.vue index 5646bf5f3f..d726dfc70e 100644 --- a/panel/src/components/Forms/Input/DateInput.vue +++ b/panel/src/components/Forms/Input/DateInput.vue @@ -280,9 +280,9 @@ export default { * c. cursor selection covers more than one part * => select the last affected part * d. cursor selection cover last part - * => tab should blur the input, focus on next tabbale element + * => tab should blur the input, focus on next tabable element * e. cursor is at the end of the pattern - * => tab should blur the input, focus on next tabbale element + * => tab should blur the input, focus on next tabable element * * @param {Event} event */