Browse Source

feat: autofocus the first value

tophf 4 years ago
parent
commit
bc8d1d9932
1 changed files with 15 additions and 2 deletions
  1. 15 2
      src/options/views/edit/values.vue

+ 15 - 2
src/options/views/edit/values.vue

@@ -129,9 +129,12 @@ export default {
   watch: {
     active(val) {
       if (val) {
-        storage.value.getOne(this.script.props.id).then(this.setData);
+        storage.value.getOne(this.script.props.id).then(data => {
+          // Focusing explicitly when the values UI becomes active again
+          if (this.page) this.autofocus();
+          this.setData(data);
+        });
         scriptStorageKey = storage.value.prefix + this.script?.props.id;
-        (focusedElement || this.$refs.container.querySelector('button')).focus();
         this.disposeList = [
           keyboardService.register('pageup', () => flipPage(this, -1)),
           keyboardService.register('pagedown', () => flipPage(this, 1)),
@@ -154,8 +157,18 @@ export default {
         focusedElement?.focus();
       }
     },
+    page() {
+      focusedElement = null;
+      this.autofocus();
+    },
   },
   methods: {
+    autofocus() {
+      this.$nextTick(() => {
+        (focusedElement || this.$refs.container.querySelector(this.keys?.length ? 'a' : 'button'))
+        .focus();
+      });
+    },
     getLength(key) {
       const len = this.values[key].length - 1;
       return len < 10_000 ? len : formatByteLength(len);