local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix: problem with newTaskInput ref (#1986)

Browse source 
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:
Dominik Pschenitschni 2022-05-22 15:13:12 +00:00 committed by konrad
parent c6ee8a04e2
commit 829eed0b9f
1 changed files with 28 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/views/tasks/TaskDetailView.vue
View file

@ -445,6 +445,26 @@ import ChecklistSummary from '../../components/tasks/partials/checklist-summary'
import CreatedUpdated from '@/components/tasks/partials/createdUpdated'
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({
name: 'TaskDetailView',
compatConfig: { ATTR_FALSE_VALUE: false },
@ -643,19 +663,15 @@ export default defineComponent({
setFieldActive(fieldName) {
this.activeFields[fieldName] = true
this.$nextTick(() => {
if (this.$refs[fieldName]) {
this.$refs[fieldName].$el.focus()
// 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',
})
const el = this.$refs[fieldName]?.$el
if (!el) {
return
}
el.focus()
// scroll the field to the center of the screen if not in viewport already
scrollIntoView(el)
})
},