Merge pull request #2694 from infor-design/2691-searchfield-toolbar

2691 - Change Toolbar API's Teardown to respect `noSearchfieldReinvoke` setting

app/views/components/toolbar/test-searchfield-no-reinvoke-update.html

@@ -0,0 +1,42 @@
+<div class="row top-padding">
+  <div class="twelve columns">
+
+    <div id="regular-toolbar-example" class="toolbar" role="toolbar" data-options="{'noSearchfieldReinvoke': 'true'}">
+      <div class="title">
+        Toolbar Title
+      </div>
+      <div class="buttonset">
+        <div class="searchfield-wrapper toolbar-searchfield-wrapper">
+          <label class="audible" for="regular-toolbar-searchfield">Toolbar Searchfield</label>
+          <input class="searchfield" placeholder="keyword" id="regular-toolbar-searchfield" name="regular-toolbar-searchfield" />
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<div class="row top-padding">
+  <div class="twelve columns">
+    <button id="update-toolbar" class="btn-secondary">
+      <span>Update Toolbar</span>
+    </button>
+  </div>
+</div>
+
+<script id="test-script">
+  // NOTE: IDS Initializer skips invoking Searchfields that are children of Toolbars by default,
+  // so we have to manually invoke it here:
+  $('#regular-toolbar-searchfield').searchfield();
+  var searchfieldAPI = $('#regular-toolbar-searchfield').data('searchfield');
+
+  $('body').on('initialized', function() {
+    var toolbarElem = $('#regular-toolbar-example');
+    var toolbarAPI = toolbarElem.data('toolbar');
+    var btnUpdate = $('#update-toolbar');
+
+    btnUpdate.on('click', function() {
+      toolbarAPI.updated();
+    });
+  });
+</script>

docs/CHANGELOG.md

@@ -118,6 +118,7 @@
 - `[Tabs]` Added the select method inside the hide method to ensure proper focusing of the selected tab. ([#2346](https://github.com/infor-design/enterprise/issues/2346))
 - `[Tabs]` Added an independent count for adding new tabs and their associated IDs to prevent duplication. ([#2345](https://github.com/infor-design/enterprise/issues/2345))
 - `[Toolbar]` Fixed memory leaks. ([#2496](https://github.com/infor-design/enterprise/issues/2496))
+- `[Toolbar]` Fixed an issue where `noSearchfieldReinvoke` was not being respected during the teardown method, causing lifecycle issues in Angular. ([#2691](https://github.com/infor-design/enterprise/issues/2691))
 - `[Toolbar Flex]` Removed a 100% height on the toolbar which caused issues when nested in some situations. ([#474](https://github.com/infor-design/enterprise-ng/issues/474))
 
 ### v4.20.0 Chores & Maintenance

src/components/toolbar/toolbar.js

@@ -1409,6 +1409,10 @@ Toolbar.prototype = {
    * @returns {void}
    */
   updated(settings) {
+    if (this.settings.noSearchfieldReinvoke) {
+      this.keepSearchfield = true;
+    }
+
     if (settings) {
       this.settings = utils.mergeSettings(this.element[0], settings, this.settings);
     }
@@ -1498,11 +1502,20 @@ Toolbar.prototype = {
       delete this.buttonsetItems;
     }
     if (this.buttonset.children('.searchfield-wrapper').length) {
-      const searchFields = this.buttonset.children('.searchfield-wrapper').children('.searchfield');
-      if (searchFields.data('searchfield')) {
-        searchFields.data('searchfield').destroy();
+      // this flag is set in `updated()` if the setting `noSearchfieldReinvoke` is set
+      // to `true` before an update is performed. The Searchfield will stay in-tact for
+      // one update cycle, or until the setting is reset to `true`.
+      if (!this.settings.noSearchfieldReinvoke || !this.keepSearchfield) {
+        const searchFields = this.buttonset.children('.searchfield-wrapper').children('.searchfield');
+        if (searchFields.data('searchfield')) {
+          searchFields.data('searchfield').destroy();
+        }
+      } else if (this.keepSearchfield) {
+        delete this.keepSearchfield;
       }
+    }
 
+    if (this.buttonset && this.buttonset.length) {
       this.buttonset[0].style.width = '';
       delete this.buttonset;
     }