Automatically focus controls for typing in semantic search (#455)

UUDigitalHumanitieslab · May 19, 2021 · b07ba5b · b07ba5b
1 parent cc48d47
commit b07ba5b
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/frontend/src/forms/select2-picker-view.ts b/frontend/src/forms/select2-picker-view.ts
@@ -20,4 +20,9 @@ export default class Select2PickerView extends BasePicker {
         this.$('select').select2('destroy');
         return super.remove();
     }
+
+    open(): this {
+        this.$('select').select2('open');
+        return this;
+    }
 }
diff --git a/frontend/src/semantic-search/dropdown-view.ts b/frontend/src/semantic-search/dropdown-view.ts
@@ -86,6 +86,7 @@ export default class Dropdown extends CompositeView {
     predicateGroup: View;
     groupOrder: Array<keyof Dropdown>;
     val: BasePicker['val'];
+    open: Select2Picker['open'];
 
     async initialize(): Promise<void> {
         this.model = this.model || new Model();
@@ -122,6 +123,9 @@ export default class Dropdown extends CompositeView {
             });
         }
         this.render();
+        if (this.model.has('precedent') && !this.model.has('selection')) (
+            this.typeGroup || this.predicateGroup
+        ).collection.once('complete:all', this.open, this);
     }
 
     subviews(): SubViewDescription[] {
@@ -185,5 +189,6 @@ extend(Dropdown.prototype, {
     groupOrder: ['logicGroup', 'typeGroup', 'filterGroup', 'predicateGroup'],
     events: { change: 'forwardChange' },
     val: BasePicker.prototype.val,
+    open: Select2Picker.prototype.open,
     beforeRender: Select2Picker.prototype.beforeRender,
 });
diff --git a/frontend/src/semantic-search/filter-input-view.ts b/frontend/src/semantic-search/filter-input-view.ts
@@ -19,16 +19,26 @@ export default class FilterInput extends CompositeView {
             this.$el.hide();
             return;
         }
+        let items;
         if (action === 'equals') {
             let range = precedent.get(rdfs.range);
             range = range ? range[0].id : precedent.id;
             if (!range.startsWith(xsd())) {
-                const items = new ItemGraph();
+                items = new ItemGraph();
                 items.sparqlQuery(filterInputQueryTemplate({ type: range }));
                 this.subviews.push(new Select2Picker({ collection: items }));
             }
         }
         this.render();
+        let value;
+        if (value = this.model.get('value')) {
+            this.$('select, input').val(value);
+        } else if (items) {
+            const dropdown = this.subviews[0];
+            items.once('update', dropdown.open, dropdown);
+        } else {
+            this.$('input').focus();
+        }
     }
 
     renderContainer(): this {