From 0e8e42e01526a070ea6394f349ce803d60e767b0 Mon Sep 17 00:00:00 2001
From: Kazuki Nishikawa <kz.nishikawa@gmail.com>
Date: Sun, 17 Nov 2019 21:34:34 +0900
Subject: [PATCH] Fix #573 (#574)

* add specs

* fix to restore preset choices after destroy

* avoid to modify `this.config.choices` directly

* Update cypress/integration/select-one.spec.js

Co-Authored-By: Josh Johnson <josh@joshuajohnson.co.uk>

* Update public/test/select-one.html

Co-Authored-By: Josh Johnson <josh@joshuajohnson.co.uk>

* Update public/test/select-one.html

Co-Authored-By: Josh Johnson <josh@joshuajohnson.co.uk>

* Update public/test/select-one.html

Co-Authored-By: Josh Johnson <josh@joshuajohnson.co.uk>

* Update public/test/select-one.html

Co-Authored-By: Josh Johnson <josh@joshuajohnson.co.uk>

* fix specs

* restoring passed element initial options

 - Save `passedElement.options` values as `this._presetOptions`
 - Restore saved `this._presetOptions` to `passedElement.options` on `destroy`
 - It avoids restoring options in `this.config.choices`

* Update cypress/integration/select-one.spec.js

Co-Authored-By: Josh Johnson <josh@joshuajohnson.co.uk>

* Update cypress/integration/select-one.spec.js

Co-Authored-By: Josh Johnson <josh@joshuajohnson.co.uk>

* Update public/test/select-one.html

Co-Authored-By: Josh Johnson <josh@joshuajohnson.co.uk>

* move preset options assignment statement
---
 cypress/integration/select-one.spec.js | 34 ++++++++++++++++++++++++++
 public/test/select-one/index.html      | 25 +++++++++++++++++++
 src/scripts/choices.js                 |  7 ++++--
 3 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/select-one.spec.js b/cypress/integration/select-one.spec.js
index c44c907..3d2c35d 100644
--- a/cypress/integration/select-one.spec.js
+++ b/cypress/integration/select-one.spec.js
@@ -1022,5 +1022,39 @@ describe('Choices - select one', () => {
           });
       });
     });
+
+    describe('re-initialising a choices instance', () => {
+      it('preserves the choices list', () => {
+        cy.get('[data-test-hook=new-destroy-init]')
+          .find('.choices__list--dropdown .choices__list')
+          .children()
+          .should('have.length', 3);
+
+        cy.get('[data-test-hook=new-destroy-init]')
+          .find('button.destroy')
+          .click();
+        cy.get('[data-test-hook=new-destroy-init]')
+          .find('button.init')
+          .click();
+
+        cy.get('[data-test-hook=new-destroy-init]')
+          .find('.choices__list--dropdown .choices__list')
+          .children()
+          .should('have.length', 3);
+      });
+    });
+
+    describe('destroying the choices instance', () => {
+      it('preserves the original select element', () => {
+        cy.get('[data-test-hook=new-destroy-init]')
+          .find('button.destroy')
+          .click();
+
+        cy.get('[data-test-hook=new-destroy-init]')
+          .find('select')
+          .children()
+          .should('have.length', 3);
+      });
+    });
   });
 });
diff --git a/public/test/select-one/index.html b/public/test/select-one/index.html
index 4532b15..b567b28 100644
--- a/public/test/select-one/index.html
+++ b/public/test/select-one/index.html
@@ -359,6 +359,21 @@
             <option value="value2">label2</option>
           </select>
         </div>
+
+        <div data-test-hook="new-destroy-init">
+          <label for="choices-new-destroy-init">New, Destroy, Init</label>
+          <select
+            class="form-control"
+            name="choices-new-destroy-init"
+            id="choices-new-destroy-init"
+          >
+            <option value="Choice 1">Choice 1</option>
+            <option value="Choice 2">Choice 2</option>
+            <option value="Choice 3">Choice 3</option>
+          </select>
+          <button class="destroy">Destroy</button>
+          <button class="init">Init</button>
+        </div>
       </div>
     </div>
     <script>
@@ -523,6 +538,16 @@
         );
 
         new Choices('#choices-search-by-label', { searchFields: ['label'] });
+
+        const newDestroyInitChoices = new Choices('#choices-new-destroy-init');
+        document
+          .querySelector('button.destroy')
+          .addEventListener('click', () => {
+            newDestroyInitChoices.destroy();
+          });
+        document.querySelector('button.init').addEventListener('click', () => {
+          newDestroyInitChoices.init();
+        });
       });
     </script>
   </body>
diff --git a/src/scripts/choices.js b/src/scripts/choices.js
index 38f6551..1d69104 100644
--- a/src/scripts/choices.js
+++ b/src/scripts/choices.js
@@ -183,6 +183,8 @@ class Choices {
     };
     // Assign preset groups from passed element
     this._presetGroups = this.passedElement.optionGroups;
+    // Assign preset options from passed element
+    this._presetOptions = this.passedElement.options;
     // Assign preset choices from passed object
     this._presetChoices = this.config.choices;
     // Assign preset items from passed object first
@@ -283,11 +285,12 @@ class Choices {
     this.passedElement.reveal();
     this.containerOuter.unwrap(this.passedElement.element);
 
+    this.clearStore();
+
     if (this._isSelectElement) {
-      this.passedElement.options = this._presetChoices;
+      this.passedElement.options = this._presetOptions;
     }
 
-    this.clearStore();
     this._templates = null;
     this.initialised = false;
   }