Update allowHTML wording, set remote examples to allowHTML false
This commit is contained in:
parent
391c3e39cb
commit
66c6864267
|
@ -319,9 +319,11 @@ Pass an array of objects:
|
||||||
|
|
||||||
**Type:** `Boolean` **Default:** `true`
|
**Type:** `Boolean` **Default:** `true`
|
||||||
|
|
||||||
**Input types affected:** `text`, `select-one`, `select-multiple
|
**Input types affected:** `text`, `select-one`, `select-multiple`
|
||||||
|
|
||||||
**Usage:** Whether HTML should be shown properly when showing choices. (Can be used to perform XSS attacks if not disabled or handled correctly)
|
**Usage:** Whether HTML should be rendered in all Choices elements. If `false`, all elements (placeholder, items, etc.) will be treated as plain text. If `true`, this can be used to perform XSS scripting attacks if you load choices from a remote source.
|
||||||
|
|
||||||
|
**Deprecation Warning:** This will default to `false` in a future release.
|
||||||
|
|
||||||
### duplicateItemsAllowed
|
### duplicateItemsAllowed
|
||||||
|
|
||||||
|
|
|
@ -875,7 +875,7 @@ describe('Choices - select multiple', () => {
|
||||||
it('logs a deprecation warning', () => {
|
it('logs a deprecation warning', () => {
|
||||||
cy.get('@consoleWarn').should(
|
cy.get('@consoleWarn').should(
|
||||||
'be.calledOnceWithExactly',
|
'be.calledOnceWithExactly',
|
||||||
'Deprecation warning: allowHTML in the future will be defaulted to false. You must explicitly set it to true to properly display html tags in choices.',
|
'Deprecation warning: allowHTML will default to false in a future release. To render HTML in Choices, you will need to set it to true. Setting allowHTML will suppress this message.',
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -1010,7 +1010,7 @@ describe('Choices - select one', () => {
|
||||||
it('logs a deprecation warning', () => {
|
it('logs a deprecation warning', () => {
|
||||||
cy.get('@consoleWarn').should(
|
cy.get('@consoleWarn').should(
|
||||||
'be.calledOnceWithExactly',
|
'be.calledOnceWithExactly',
|
||||||
'Deprecation warning: allowHTML in the future will be defaulted to false. You must explicitly set it to true to properly display html tags in choices.',
|
'Deprecation warning: allowHTML will default to false in a future release. To render HTML in Choices, you will need to set it to true. Setting allowHTML will suppress this message.',
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -364,7 +364,7 @@ describe('Choices - text element', () => {
|
||||||
it('logs a deprecation warning', () => {
|
it('logs a deprecation warning', () => {
|
||||||
cy.get('@consoleWarn').should(
|
cy.get('@consoleWarn').should(
|
||||||
'be.calledOnceWithExactly',
|
'be.calledOnceWithExactly',
|
||||||
'Deprecation warning: allowHTML in the future will be defaulted to false. You must explicitly set it to true to properly display html tags in choices.',
|
'Deprecation warning: allowHTML will default to false in a future release. To render HTML in Choices, you will need to set it to true. Setting allowHTML will suppress this message.',
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -292,7 +292,7 @@ function () {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (userConfig.allowHTML === undefined) {
|
if (userConfig.allowHTML === undefined) {
|
||||||
console.warn('Deprecation warning: allowHTML in the future will be defaulted to false. You must explicitly set it to true to properly display html tags in choices.');
|
console.warn('Deprecation warning: allowHTML will default to false in a future release. To render HTML in Choices, you will need to set it to true. Setting allowHTML will suppress this message.');
|
||||||
}
|
}
|
||||||
|
|
||||||
this.config = deepmerge_1.default.all([defaults_1.DEFAULT_CONFIG, Choices.defaults.options, userConfig], // When merging array configs, replace with a copy of the userConfig array,
|
this.config = deepmerge_1.default.all([defaults_1.DEFAULT_CONFIG, Choices.defaults.options, userConfig], // When merging array configs, replace with a copy of the userConfig array,
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -624,7 +624,7 @@
|
||||||
);
|
);
|
||||||
|
|
||||||
var multipleFetch = new Choices('#choices-multiple-remote-fetch', {
|
var multipleFetch = new Choices('#choices-multiple-remote-fetch', {
|
||||||
allowHTML: true,
|
allowHTML: false,
|
||||||
placeholder: true,
|
placeholder: true,
|
||||||
placeholderValue: 'Pick an Strokes record',
|
placeholderValue: 'Pick an Strokes record',
|
||||||
maxItemCount: 5,
|
maxItemCount: 5,
|
||||||
|
@ -687,7 +687,7 @@
|
||||||
);
|
);
|
||||||
|
|
||||||
var singleFetch = new Choices('#choices-single-remote-fetch', {
|
var singleFetch = new Choices('#choices-single-remote-fetch', {
|
||||||
allowHTML: true,
|
allowHTML: false,
|
||||||
searchPlaceholderValue: 'Search for an Arctic Monkeys record',
|
searchPlaceholderValue: 'Search for an Arctic Monkeys record',
|
||||||
})
|
})
|
||||||
.setChoices(function() {
|
.setChoices(function() {
|
||||||
|
|
|
@ -240,7 +240,9 @@ describe('choices', () => {
|
||||||
document.body.innerHTML = `
|
document.body.innerHTML = `
|
||||||
<div data-choice id="div-1"></div>
|
<div data-choice id="div-1"></div>
|
||||||
`;
|
`;
|
||||||
expect(() => new Choices('[data-choice]', { allowHTML: true })).to.throw(
|
expect(
|
||||||
|
() => new Choices('[data-choice]', { allowHTML: true }),
|
||||||
|
).to.throw(
|
||||||
TypeError,
|
TypeError,
|
||||||
'Expected one of the following types text|select-one|select-multiple',
|
'Expected one of the following types text|select-one|select-multiple',
|
||||||
);
|
);
|
||||||
|
|
|
@ -153,7 +153,7 @@ class Choices implements Choices {
|
||||||
) {
|
) {
|
||||||
if (userConfig.allowHTML === undefined) {
|
if (userConfig.allowHTML === undefined) {
|
||||||
console.warn(
|
console.warn(
|
||||||
'Deprecation warning: allowHTML in the future will be defaulted to false. You must explicitly set it to true to properly display html tags in choices.',
|
'Deprecation warning: allowHTML will default to false in a future release. To render HTML in Choices, you will need to set it to true. Setting allowHTML will suppress this message.',
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -160,8 +160,11 @@ export interface Options {
|
||||||
editItems: boolean;
|
editItems: boolean;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Whether HTML should be shown properly when showing choices.
|
* Whether HTML should be rendered in all Choices elements.
|
||||||
* (Can be used to perform XSS attacks if not disabled or handled correctly)
|
* If `false`, all elements (placeholder, items, etc.) will be treated as plain text.
|
||||||
|
* If `true`, this can be used to perform XSS scripting attacks if you load choices from a remote source.
|
||||||
|
*
|
||||||
|
* **Deprecation Warning:** This will default to `false` in a future release.
|
||||||
*
|
*
|
||||||
* **Input types affected:** text, select-one, select-multiple
|
* **Input types affected:** text, select-one, select-multiple
|
||||||
*
|
*
|
||||||
|
|
|
@ -8,6 +8,7 @@ import { Group } from './interfaces/group';
|
||||||
import { Item } from './interfaces/item';
|
import { Item } from './interfaces/item';
|
||||||
import { PassedElementType } from './interfaces/passed-element-type';
|
import { PassedElementType } from './interfaces/passed-element-type';
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
type TemplateOptions = Record<'classNames' | 'allowHTML', any>;
|
type TemplateOptions = Record<'classNames' | 'allowHTML', any>;
|
||||||
|
|
||||||
const templates = {
|
const templates = {
|
||||||
|
@ -46,7 +47,9 @@ const templates = {
|
||||||
return div;
|
return div;
|
||||||
},
|
},
|
||||||
|
|
||||||
containerInner({ classNames: { containerInner } }: TemplateOptions): HTMLDivElement {
|
containerInner({
|
||||||
|
classNames: { containerInner },
|
||||||
|
}: TemplateOptions): HTMLDivElement {
|
||||||
return Object.assign(document.createElement('div'), {
|
return Object.assign(document.createElement('div'), {
|
||||||
className: containerInner,
|
className: containerInner,
|
||||||
});
|
});
|
||||||
|
@ -160,7 +163,10 @@ const templates = {
|
||||||
},
|
},
|
||||||
|
|
||||||
choiceGroup(
|
choiceGroup(
|
||||||
{ allowHTML, classNames: { group, groupHeading, itemDisabled } }: TemplateOptions,
|
{
|
||||||
|
allowHTML,
|
||||||
|
classNames: { group, groupHeading, itemDisabled },
|
||||||
|
}: TemplateOptions,
|
||||||
{ id, value, disabled }: Group,
|
{ id, value, disabled }: Group,
|
||||||
): HTMLDivElement {
|
): HTMLDivElement {
|
||||||
const div = Object.assign(document.createElement('div'), {
|
const div = Object.assign(document.createElement('div'), {
|
||||||
|
@ -268,7 +274,9 @@ const templates = {
|
||||||
return inp;
|
return inp;
|
||||||
},
|
},
|
||||||
|
|
||||||
dropdown({ classNames: { list, listDropdown } }: TemplateOptions): HTMLDivElement {
|
dropdown({
|
||||||
|
classNames: { list, listDropdown },
|
||||||
|
}: TemplateOptions): HTMLDivElement {
|
||||||
const div = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
|
|
||||||
div.classList.add(list, listDropdown);
|
div.classList.add(list, listDropdown);
|
||||||
|
|
Loading…
Reference in New Issue