Always focus inputs on kanban when adding a new task or bucket
This commit is contained in:
parent
0ae73c906d
commit
5705b5afd1
2 changed files with 4 additions and 4 deletions
|
@ -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()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in a new issue