Browse Source

Update allowHTML wording, set remote examples to allowHTML false

pull/984/head
Matt Triff 1 month ago
parent
commit
66c6864267
  1. 6
      README.md
  2. 2
      cypress/integration/select-multiple.spec.ts
  3. 2
      cypress/integration/select-one.spec.ts
  4. 2
      cypress/integration/text.spec.ts
  5. 2
      public/assets/scripts/choices.js
  6. 2
      public/assets/scripts/choices.min.js
  7. 4
      public/index.html
  8. 4
      src/scripts/choices.test.ts
  9. 2
      src/scripts/choices.ts
  10. 7
      src/scripts/interfaces/options.ts
  11. 14
      src/scripts/templates.ts

6
README.md

@ -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 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.
**Usage:** Whether HTML should be shown properly when showing choices. (Can be used to perform XSS attacks if not disabled or handled correctly)
**Deprecation Warning:** This will default to `false` in a future release.
### duplicateItemsAllowed

2
cypress/integration/select-multiple.spec.ts

@ -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.',
);
});

2
cypress/integration/select-one.spec.ts

@ -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.',
);
});

2
cypress/integration/text.spec.ts

@ -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.',
);
});

2
public/assets/scripts/choices.js

@ -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,

2
public/assets/scripts/choices.min.js

File diff suppressed because one or more lines are too long

4
public/index.html

@ -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() {

4
src/scripts/choices.test.ts

@ -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',
);

2
src/scripts/choices.ts

@ -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.',
);
}

7
src/scripts/interfaces/options.ts

@ -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
*

14
src/scripts/templates.ts

@ -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…
Cancel
Save