mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-02 14:02:46 +02:00
fix dir (#711)
This commit is contained in:
parent
a2485392a5
commit
b48395ce36
|
@ -126,7 +126,23 @@ class Choices {
|
||||||
this._wasTap = true;
|
this._wasTap = true;
|
||||||
this._placeholderValue = this._generatePlaceholderValue();
|
this._placeholderValue = this._generatePlaceholderValue();
|
||||||
this._baseId = generateId(this.passedElement.element, 'choices-');
|
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 = {
|
this._idNames = {
|
||||||
itemChoice: 'item-choice',
|
itemChoice: 'item-choice',
|
||||||
};
|
};
|
||||||
|
|
|
@ -15,9 +15,9 @@ export const TEMPLATES = /** @type {Templates} */ ({
|
||||||
) {
|
) {
|
||||||
const div = Object.assign(document.createElement('div'), {
|
const div = Object.assign(document.createElement('div'), {
|
||||||
className: containerOuter,
|
className: containerOuter,
|
||||||
dir,
|
|
||||||
});
|
});
|
||||||
div.dataset.type = passedElementType;
|
div.dataset.type = passedElementType;
|
||||||
|
if (dir) div.dir = dir;
|
||||||
if (isSelectOneElement) div.tabIndex = 0;
|
if (isSelectOneElement) div.tabIndex = 0;
|
||||||
if (isSelectElement) {
|
if (isSelectElement) {
|
||||||
div.setAttribute('role', searchEnabled ? 'combobox' : 'listbox');
|
div.setAttribute('role', searchEnabled ? 'combobox' : 'listbox');
|
||||||
|
@ -98,7 +98,6 @@ export const TEMPLATES = /** @type {Templates} */ ({
|
||||||
choiceList({ list }, isSelectOneElement) {
|
choiceList({ list }, isSelectOneElement) {
|
||||||
const div = Object.assign(document.createElement('div'), {
|
const div = Object.assign(document.createElement('div'), {
|
||||||
className: list,
|
className: list,
|
||||||
dir: 'ltr',
|
|
||||||
});
|
});
|
||||||
if (!isSelectOneElement) div.setAttribute('aria-multiselectable', 'true');
|
if (!isSelectOneElement) div.setAttribute('aria-multiselectable', 'true');
|
||||||
div.setAttribute('role', 'listbox');
|
div.setAttribute('role', 'listbox');
|
||||||
|
|
|
@ -223,7 +223,6 @@ describe('templates', () => {
|
||||||
const expectedOutput = strToEl(`
|
const expectedOutput = strToEl(`
|
||||||
<div
|
<div
|
||||||
class="${classes.list}"
|
class="${classes.list}"
|
||||||
dir="ltr"
|
|
||||||
role="listbox"
|
role="listbox"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
@ -239,7 +238,6 @@ describe('templates', () => {
|
||||||
const expectedOutput = strToEl(`
|
const expectedOutput = strToEl(`
|
||||||
<div
|
<div
|
||||||
class="${classes.list}"
|
class="${classes.list}"
|
||||||
dir="ltr"
|
|
||||||
role="listbox"
|
role="listbox"
|
||||||
aria-multiselectable="true"
|
aria-multiselectable="true"
|
||||||
>
|
>
|
||||||
|
|
Loading…
Reference in a new issue