Always focus inputs on kanban when adding a new task or bucket

This commit is contained in:
kolaente 2020-08-11 21:04:22 +02:00
parent 0ae73c906d
commit 5705b5afd1
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 4 additions and 4 deletions

View file

@ -134,12 +134,12 @@ Vue.use(vueShortkey)
// Set focus // Set focus
Vue.directive('focus', { Vue.directive('focus', {
// When the bound element is inserted into the DOM... // When the bound element is inserted into the DOM...
inserted: el => { inserted: (el, {modifiers}) => {
// Focus the element only if the viewport is big enough // Focus the element only if the viewport is big enough
// auto focusing elements on mobile can be annoying since in these cases the // auto focusing elements on mobile can be annoying since in these cases the
// keyboard always pops up and takes half of the available space on the screen. // keyboard always pops up and takes half of the available space on the screen.
// The threshhold is the same as the breakpoints in css. // The threshhold is the same as the breakpoints in css.
if (window.innerWidth > 769) { if (window.innerWidth > 769 || (typeof modifiers.always !== 'undefined' && modifiers.always)) {
el.focus() el.focus()
} }
} }

View file

@ -125,7 +125,7 @@
class="input" class="input"
type="text" type="text"
placeholder="Enter the new task text..." placeholder="Enter the new task text..."
v-focus v-focus.always
@focusout="toggleShowNewTaskInput(bucket.id)" @focusout="toggleShowNewTaskInput(bucket.id)"
@keyup.esc="toggleShowNewTaskInput(bucket.id)" @keyup.esc="toggleShowNewTaskInput(bucket.id)"
@keyup.enter="addTaskToBucket(bucket.id)" @keyup.enter="addTaskToBucket(bucket.id)"
@ -161,7 +161,7 @@
class="input" class="input"
type="text" type="text"
placeholder="Enter the new bucket title..." placeholder="Enter the new bucket title..."
v-focus v-focus.always
@focusout="() => showNewBucketInput = false" @focusout="() => showNewBucketInput = false"
@keyup.esc="() => showNewBucketInput = false" @keyup.esc="() => showNewBucketInput = false"
@keyup.enter="createNewBucket" @keyup.enter="createNewBucket"