fix: problem with newTaskInput ref (#1986)
Co-authored-by: Dominik Pschenitschni <mail@celement.de> Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1986 Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de> Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
This commit is contained in:
parent
c6ee8a04e2
commit
829eed0b9f
1 changed files with 28 additions and 12 deletions
|
@ -445,6 +445,26 @@ import ChecklistSummary from '../../components/tasks/partials/checklist-summary'
|
||||||
import CreatedUpdated from '@/components/tasks/partials/createdUpdated'
|
import CreatedUpdated from '@/components/tasks/partials/createdUpdated'
|
||||||
import { setTitle } from '@/helpers/setTitle'
|
import { setTitle } from '@/helpers/setTitle'
|
||||||
|
|
||||||
|
function scrollIntoView(el) {
|
||||||
|
if (!el) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const boundingRect = el.getBoundingClientRect()
|
||||||
|
const scrollY = window.scrollY
|
||||||
|
|
||||||
|
if (
|
||||||
|
boundingRect.top > (scrollY + window.innerHeight) ||
|
||||||
|
boundingRect.top < scrollY
|
||||||
|
) {
|
||||||
|
el.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'center',
|
||||||
|
inline: 'nearest',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'TaskDetailView',
|
name: 'TaskDetailView',
|
||||||
compatConfig: { ATTR_FALSE_VALUE: false },
|
compatConfig: { ATTR_FALSE_VALUE: false },
|
||||||
|
@ -643,19 +663,15 @@ export default defineComponent({
|
||||||
setFieldActive(fieldName) {
|
setFieldActive(fieldName) {
|
||||||
this.activeFields[fieldName] = true
|
this.activeFields[fieldName] = true
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
if (this.$refs[fieldName]) {
|
const el = this.$refs[fieldName]?.$el
|
||||||
this.$refs[fieldName].$el.focus()
|
if (!el) {
|
||||||
|
return
|
||||||
// scroll the field to the center of the screen if not in viewport already
|
|
||||||
const boundingRect = this.$refs[fieldName].$el.getBoundingClientRect()
|
|
||||||
|
|
||||||
if (boundingRect.top > (window.scrollY + window.innerHeight) || boundingRect.top < window.scrollY)
|
|
||||||
this.$refs[fieldName].$el.scrollIntoView({
|
|
||||||
behavior: 'smooth',
|
|
||||||
block: 'center',
|
|
||||||
inline: 'nearest',
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
el.focus()
|
||||||
|
|
||||||
|
// scroll the field to the center of the screen if not in viewport already
|
||||||
|
scrollIntoView(el)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue