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`
|
||||
|
||||
**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
|
||||
|
||||
|
|
|
@ -875,7 +875,7 @@ describe('Choices - select multiple', () => {
|
|||
it('logs a deprecation warning', () => {
|
||||
cy.get('@consoleWarn').should(
|
||||
'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', () => {
|
||||
cy.get('@consoleWarn').should(
|
||||
'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', () => {
|
||||
cy.get('@consoleWarn').should(
|
||||
'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) {
|
||||
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,
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -624,7 +624,7 @@
|
|||
);
|
||||
|
||||
var multipleFetch = new Choices('#choices-multiple-remote-fetch', {
|
||||
allowHTML: true,
|
||||
allowHTML: false,
|
||||
placeholder: true,
|
||||
placeholderValue: 'Pick an Strokes record',
|
||||
maxItemCount: 5,
|
||||
|
@ -687,7 +687,7 @@
|
|||
);
|
||||
|
||||
var singleFetch = new Choices('#choices-single-remote-fetch', {
|
||||
allowHTML: true,
|
||||
allowHTML: false,
|
||||
searchPlaceholderValue: 'Search for an Arctic Monkeys record',
|
||||
})
|
||||
.setChoices(function() {
|
||||
|
|
|
@ -240,7 +240,9 @@ describe('choices', () => {
|
|||
document.body.innerHTML = `
|
||||
<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,
|
||||
'Expected one of the following types text|select-one|select-multiple',
|
||||
);
|
||||
|
|
|
@ -153,7 +153,7 @@ class Choices implements Choices {
|
|||
) {
|
||||
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.',
|
||||
'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;
|
||||
|
||||
/**
|
||||
* Whether HTML should be shown properly when showing choices.
|
||||
* (Can be used to perform XSS attacks if not disabled or handled correctly)
|
||||
* 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.
|
||||
*
|
||||
* **Input types affected:** text, select-one, select-multiple
|
||||
*
|
||||
|
|
|
@ -8,6 +8,7 @@ import { Group } from './interfaces/group';
|
|||
import { Item } from './interfaces/item';
|
||||
import { PassedElementType } from './interfaces/passed-element-type';
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
type TemplateOptions = Record<'classNames' | 'allowHTML', any>;
|
||||
|
||||
const templates = {
|
||||
|
@ -46,7 +47,9 @@ const templates = {
|
|||
return div;
|
||||
},
|
||||
|
||||
containerInner({ classNames: { containerInner } }: TemplateOptions): HTMLDivElement {
|
||||
containerInner({
|
||||
classNames: { containerInner },
|
||||
}: TemplateOptions): HTMLDivElement {
|
||||
return Object.assign(document.createElement('div'), {
|
||||
className: containerInner,
|
||||
});
|
||||
|
@ -160,7 +163,10 @@ const templates = {
|
|||
},
|
||||
|
||||
choiceGroup(
|
||||
{ allowHTML, classNames: { group, groupHeading, itemDisabled } }: TemplateOptions,
|
||||
{
|
||||
allowHTML,
|
||||
classNames: { group, groupHeading, itemDisabled },
|
||||
}: TemplateOptions,
|
||||
{ id, value, disabled }: Group,
|
||||
): HTMLDivElement {
|
||||
const div = Object.assign(document.createElement('div'), {
|
||||
|
@ -268,7 +274,9 @@ const templates = {
|
|||
return inp;
|
||||
},
|
||||
|
||||
dropdown({ classNames: { list, listDropdown } }: TemplateOptions): HTMLDivElement {
|
||||
dropdown({
|
||||
classNames: { list, listDropdown },
|
||||
}: TemplateOptions): HTMLDivElement {
|
||||
const div = document.createElement('div');
|
||||
|
||||
div.classList.add(list, listDropdown);
|
||||
|
|
Loading…
Reference in New Issue