From 1a80fecfd0d23ed2f733ec6c5daa9ea28540925a Mon Sep 17 00:00:00 2001
From: Julian Gonggrijp <dev@juliangonggrijp.com>
Date: Thu, 22 Apr 2021 14:11:18 +0200
Subject: [PATCH] Factor out reusable select2 picker (#426 #455)

---
 frontend/src/forms/select2-picker-view.ts     | 28 +++++++++++++++++++
 .../panel-annotation/annotation-edit-view.ts  | 12 ++------
 2 files changed, 31 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/forms/select2-picker-view.ts

diff --git a/frontend/src/forms/select2-picker-view.ts b/frontend/src/forms/select2-picker-view.ts
new file mode 100644
index 000000000..bfc26d2de
--- /dev/null
+++ b/frontend/src/forms/select2-picker-view.ts
@@ -0,0 +1,28 @@
+import { extend } from 'lodash';
+import 'select2';
+
+import BasePicker from './base-picker-view';
+
+/**
+ * A very thin wrapper around `BasePicker` that enables the select2 plugin.
+ */
+export default class Select2PickerView extends BasePicker {
+    beforeRender(): this {
+        this.$('select').select2('destroy');
+        return this;
+    }
+
+    afterRender(): this {
+        this.$('select').select2();
+        return this;
+    }
+
+    remove(): this {
+        this.$('select').select2('destroy');
+        return super.remove();
+    }
+}
+
+extend(Select2PickerView.prototype, {
+    className: 'readit-picker',
+});
diff --git a/frontend/src/panel-annotation/annotation-edit-view.ts b/frontend/src/panel-annotation/annotation-edit-view.ts
index 5ac16bbf9..c3462b6d0 100644
--- a/frontend/src/panel-annotation/annotation-edit-view.ts
+++ b/frontend/src/panel-annotation/annotation-edit-view.ts
@@ -8,7 +8,7 @@ import Node from '../common-rdf/node';
 import Graph from '../common-rdf/graph';
 
 import ItemEditor from '../item-edit/item-edit-view';
-import PickerView from '../forms/base-picker-view';
+import PickerView from '../forms/select2-picker-view';
 import FilteredCollection from '../common-adapters/filtered-collection';
 import ItemGraph from '../common-adapters/item-graph';
 import ClassPickerView from '../forms/ontology-class-picker-view';
@@ -50,12 +50,7 @@ export default class AnnotationEditView extends CompositeView<FlatItem> {
     initialize() {
         this.itemOptions = new ItemGraph();
         this.itemOptions.comparator = this.sortOptions;
-        this.itemPicker = new PickerView({
-            collection: this.itemOptions,
-            className: '',
-        });
-        // Replace Bulma select by select2 select. TODO: make this less hacky.
-        this.itemPicker.$('select').width('95%').select2();
+        this.itemPicker = new PickerView({ collection: this.itemOptions });
         this.classPicker = new ClassPickerView({
             collection: getOntologyClasses(),
             preselection: this.model.get('class'),
@@ -112,7 +107,6 @@ export default class AnnotationEditView extends CompositeView<FlatItem> {
 
     remove(): this {
         if (this.validator) this.validator.destroy();
-        this.itemPicker.$('select').select2('destroy');
         super.remove();
         return this;
     }
@@ -263,7 +257,7 @@ export default class AnnotationEditView extends CompositeView<FlatItem> {
         if (isBlank(this.model.underlying)) {
             // Remove the placeholder.
             this.collection.underlying.remove(this.model.underlying);
-        } 
+        }
         explorerChannel.trigger('annotationEditView:close', this);
         return this;
     }