[BUGFIX] Check for constructor name of element on bootstrap

The previous check using `instanceof` fails in case the Choices.js
component is rendered in the `top` frame while the JavaScript actually
using Choices.js is in an iframe.

The conditions are changed to check for `constructor.name` now, solving
the issue.

Due to the rather messy constructor, some quirks like operational
chaining and explicit type casts need to be used to make the TypeScript
compiling process happy.

Fixes: #1057

public/assets/scripts/choices.js

@@ -306,7 +306,7 @@ function () {
 
     var passedElement = typeof element === 'string' ? document.querySelector(element) : element;
 
-    if (!(passedElement instanceof HTMLInputElement || passedElement instanceof HTMLSelectElement)) {
+    if (!((passedElement === null || passedElement === void 0 ? void 0 : passedElement.constructor.name) === 'HTMLInputElement' || (passedElement === null || passedElement === void 0 ? void 0 : passedElement.constructor.name) === 'HTMLSelectElement')) {
       throw TypeError('Expected one of the following types text|select-one|select-multiple');
     }
 
@@ -3086,7 +3086,7 @@ function () {
     this.element = element;
     this.classNames = classNames;
 
-    if (!(element instanceof HTMLInputElement) && !(element instanceof HTMLSelectElement)) {
+    if (!((element === null || element === void 0 ? void 0 : element.constructor.name) === 'HTMLInputElement') && !((element === null || element === void 0 ? void 0 : element.constructor.name) === 'HTMLSelectElement')) {
       throw new TypeError('Invalid element passed');
     }
 
@@ -4614,7 +4614,7 @@ var templates = {
     div.setAttribute('aria-expanded', 'false');
 
     if (labelId) {
-      div.setAttribute('aria-labeledby', labelId);
+      div.setAttribute('aria-labelledby', labelId);
     }
 
     return div;

public/assets/styles/base.css

@@ -78,8 +78,7 @@ a:focus {
   border: 1px solid #ddd;
   border-radius: 2.5px;
   font-size: 14px;
-  -webkit-appearance: none;
-          appearance: none;
+  appearance: none;
   margin-bottom: 24px;
 }
 
@@ -179,3 +178,5 @@ label + p {
 }
 
 /* =====  End of Section comment block  ====== */
+
+/*# sourceMappingURL=base.css.map */

src/scripts/choices.ts

@@ -177,8 +177,8 @@ class Choices implements Choices {
 
     if (
       !(
-        passedElement instanceof HTMLInputElement ||
-        passedElement instanceof HTMLSelectElement
+        passedElement?.constructor.name === 'HTMLInputElement' ||
+        passedElement?.constructor.name === 'HTMLSelectElement'
       )
     ) {
       throw TypeError(
@@ -186,9 +186,9 @@ class Choices implements Choices {
       );
     }
 
-    this._isTextElement = passedElement.type === TEXT_TYPE;
-    this._isSelectOneElement = passedElement.type === SELECT_ONE_TYPE;
-    this._isSelectMultipleElement = passedElement.type === SELECT_MULTIPLE_TYPE;
+    this._isTextElement = (passedElement as HTMLInputElement).type === TEXT_TYPE;
+    this._isSelectOneElement = (passedElement as HTMLSelectElement).type === SELECT_ONE_TYPE;
+    this._isSelectMultipleElement = (passedElement as HTMLSelectElement).type === SELECT_MULTIPLE_TYPE;
     this._isSelectElement =
       this._isSelectOneElement || this._isSelectMultipleElement;
 

src/scripts/components/wrapped-element.ts

@@ -14,8 +14,8 @@ export default class WrappedElement {
     this.classNames = classNames;
 
     if (
-      !(element instanceof HTMLInputElement) &&
-      !(element instanceof HTMLSelectElement)
+      !(element?.constructor.name === 'HTMLInputElement') &&
+      !(element?.constructor.name === 'HTMLSelectElement')
     ) {
       throw new TypeError('Invalid element passed');
     }