fix dir (#711)

src/scripts/choices.js

@@ -126,7 +126,23 @@ class Choices {
     this._wasTap = true;
     this._placeholderValue = this._generatePlaceholderValue();
     this._baseId = generateId(this.passedElement.element, 'choices-');
-    this._direction = this.passedElement.element.getAttribute('dir') || 'ltr';
+    /**
+     * setting direction in cases where it's explicitly set on passedElement
+     * or when calculated direction is different from the document
+     * @type {HTMLElement['dir']}
+     */
+    this._direction = this.passedElement.element.dir;
+    if (!this._direction) {
+      const { direction: elementDirection } = window.getComputedStyle(
+        this.passedElement.element,
+      );
+      const { direction: documentDirection } = window.getComputedStyle(
+        document.documentElement,
+      );
+      if (elementDirection !== documentDirection) {
+        this._direction = elementDirection;
+      }
+    }
     this._idNames = {
       itemChoice: 'item-choice',
     };

src/scripts/templates.js

@@ -15,9 +15,9 @@ export const TEMPLATES = /** @type {Templates} */ ({
   ) {
     const div = Object.assign(document.createElement('div'), {
       className: containerOuter,
-      dir,
     });
     div.dataset.type = passedElementType;
+    if (dir) div.dir = dir;
     if (isSelectOneElement) div.tabIndex = 0;
     if (isSelectElement) {
       div.setAttribute('role', searchEnabled ? 'combobox' : 'listbox');
@@ -98,7 +98,6 @@ export const TEMPLATES = /** @type {Templates} */ ({
   choiceList({ list }, isSelectOneElement) {
     const div = Object.assign(document.createElement('div'), {
       className: list,
-      dir: 'ltr',
     });
     if (!isSelectOneElement) div.setAttribute('aria-multiselectable', 'true');
     div.setAttribute('role', 'listbox');

src/scripts/templates.test.js

@@ -223,7 +223,6 @@ describe('templates', () => {
         const expectedOutput = strToEl(`
           <div
             class="${classes.list}"
-            dir="ltr"
             role="listbox"
             >
           </div>
@@ -239,7 +238,6 @@ describe('templates', () => {
         const expectedOutput = strToEl(`
           <div
             class="${classes.list}"
-            dir="ltr"
             role="listbox"
             aria-multiselectable="true"
             >