Server callback when dom is ready (#68)

- Added a call to invoke a server side function that will initialize the data connector. This is to ensure that when used with the dialog the component will be correctly initialized. The invokation of the server side function is only done when used with Vaadin Flow and has no effect on the standalone usage of this web component. (related to: gatanaso/multiselect-combo-box-flow#46)
gatanaso · Apr 23, 2020 · 6572c3a · 6572c3a
1 parent b5bd93f
commit 6572c3a
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 4 deletions.
diff --git a/src/multiselect-combo-box.js b/src/multiselect-combo-box.js
@@ -147,6 +147,8 @@ import './multiselect-combo-box-input.js';
       this._observer = new FlattenedNodesObserver(this, (info) => {
         this._setTemplateFromNodes(info.addedNodes);
       });
+
+      this._initDataConnector(); // only relevant when used with Vaadin Flow
     }
 
     static get properties() {
@@ -465,13 +467,20 @@ import './multiselect-combo-box-input.js';
       }
     }
 
-    _hasDataProvider() {
-      return this.$.comboBox.dataProvider && typeof this.$.comboBox.dataProvider === 'function';
-    }
-
     _setTemplateFromNodes(nodes) {
       this._itemTemplate = nodes.filter(node => node.localName && node.localName === 'template')[0] || this._itemTemplate;
     }
+
+    _initDataConnector() {
+      if (!this._hasDataProvider()) {
+        // server callback to initialize the data connector (when used with Vaadin Flow)
+        this.$server && this.$server.initDataConnector();
+      }
+    }
+
+    _hasDataProvider() {
+      return this.$.comboBox.dataProvider && typeof this.$.comboBox.dataProvider === 'function';
+    }
   }
 
   customElements.define(MultiselectComboBox.is, MultiselectComboBox);

diff --git a/test/multiselect-combo-box_test.html b/test/multiselect-combo-box_test.html
@@ -1108,6 +1108,36 @@
           multiselectComboBox._handleCustomValueSet(event);
         });
       });
+
+      describe('_initDataConnector', () => {
+        it('should invoke server callback when component has no data provider', () => {
+          // given
+          multiselectComboBox.$server = {
+            initDataConnector: sinon.stub()
+          };
+
+          // when
+          multiselectComboBox._initDataConnector();
+
+          // then
+          sinon.assert.calledOnce(multiselectComboBox.$server.initDataConnector);
+        });
+
+        it('should not invoke server callback when component has a data provider', () => {
+          // given
+          multiselectComboBox.$server = {
+            initDataConnector: sinon.stub()
+          };
+
+          multiselectComboBox.$.comboBox.dataProvider = function dummy() {};
+
+          // when
+          multiselectComboBox._initDataConnector();
+
+          // then
+          sinon.assert.notCalled(multiselectComboBox.$server.initDataConnector);
+        });
+      });
     });
   </script>
 </body>