From 83631cd87ba191d1c913833b0c63dc88186c733b Mon Sep 17 00:00:00 2001 From: Jonathan Berger Date: Sun, 21 Jan 2018 21:09:07 -0800 Subject: [PATCH 01/14] Better title and description This isn't really an "API". Rather it's a list of options. I've changed the title and description to match this. --- pages/03.configuration/01.options-api/docs.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/03.configuration/01.options-api/docs.md b/pages/03.configuration/01.options-api/docs.md index d01c35dd..26d2cd23 100644 --- a/pages/03.configuration/01.options-api/docs.md +++ b/pages/03.configuration/01.options-api/docs.md @@ -1,10 +1,10 @@ --- -title: Configuration API +title: Options taxonomy: category: docs --- -The following is an attempt to provide a comprehensive list of all configuration options available in Select2. +This is a list of all the Select 2 configuration options. | Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | From ce57141fe341e543f79f219e0f70ecf33cf599f0 Mon Sep 17 00:00:00 2001 From: Emmanuel BALLERY Date: Sat, 2 Jun 2018 06:24:36 +0200 Subject: [PATCH 02/14] Fixed typo (#21) The example data response for AJAX included the wrong key for pagination. --- pages/06.data-sources/01.formats/docs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/06.data-sources/01.formats/docs.md b/pages/06.data-sources/01.formats/docs.md index 73bc49d5..befadeab 100644 --- a/pages/06.data-sources/01.formats/docs.md +++ b/pages/06.data-sources/01.formats/docs.md @@ -125,7 +125,7 @@ When options are to be generated in `` sections, options should be nes ] } ], - "paginate": { + "pagination": { "more": true } } From 591e6a4855d7d5374172401bb2cd0dc25118a12e Mon Sep 17 00:00:00 2001 From: Tom McLean Date: Sat, 2 Jun 2018 06:27:17 +0200 Subject: [PATCH 03/14] Document dropdownCss and containerCss (#20) It is not clear that these options expect objects. I tried a string for the entire style-attribute before searching through the sourcecode. --- pages/03.configuration/01.options-api/docs.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/03.configuration/01.options-api/docs.md b/pages/03.configuration/01.options-api/docs.md index 26d2cd23..081dc6ce 100644 --- a/pages/03.configuration/01.options-api/docs.md +++ b/pages/03.configuration/01.options-api/docs.md @@ -15,7 +15,7 @@ This is a list of all the Select 2 configuration options. | `amdBase` | string | `./` | See [Using Select2 with AMD or CommonJS loaders](/builds-and-modules#using-select2-with-amd-or-commonjs-loaders). | | `amdLanguageBase` | string | `./i18n/` | See [Using Select2 with AMD or CommonJS loaders](/builds-and-modules#using-select2-with-amd-or-commonjs-loaders). | | `closeOnSelect` | boolean | `true` | Controls whether the dropdown is [closed after a selection is made](/dropdown#forcing-the-dropdown-to-remain-open-after-selection). | -| `containerCss` | | | | +| `containerCss` | object | null | Adds custom CSS to the container. Expects key-value pairs: `{ 'css-property': 'value' }` | | `containerCssClass` | string | `''` | | | `data` | array of objects | `null` | Allows rendering dropdown options from an [array](/data-sources/arrays). | | `dataAdapter` | | `SelectAdapter` | Used to override the built-in [DataAdapter](/advanced/default-adapters/data). | @@ -24,7 +24,7 @@ This is a list of all the Select 2 configuration options. | `disabled` | boolean | `false` | When set to `true`, the select control will be disabled. | | `dropdownAdapter` | | `DropdownAdapter` | Used to override the built-in [DropdownAdapter](/advanced/default-adapters/dropdown) | | `dropdownAutoWidth` | boolean | `false` | | -| `dropdownCss` | | | | +| `dropdownCss` | object | null | Adds custom CSS to the dropdown. Expects key-value pairs: `{ 'css-property': 'value' }` | | `dropdownCssClass` | string | `''` | | | `dropdownParent` | jQuery selector or DOM node | `$(document.body)` | Allows you to [customize placement](/dropdown#dropdown-placement) of the dropdown. | | `escapeMarkup` | callback | `Utils.escapeMarkup` | Handles [automatic escaping of content rendered by custom templates](/dropdown#built-in-escaping). | From 663a7d193da97abe49df33c7591cb8fff7a34011 Mon Sep 17 00:00:00 2001 From: hartator Date: Tue, 4 Sep 2018 19:53:19 -0500 Subject: [PATCH 04/14] Make it clearer that "minimumInputLength" should be set as a Select2 option and not inside the AJAX hash. select2/select2#38 (#15) --- pages/06.data-sources/02.ajax/docs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/06.data-sources/02.ajax/docs.md b/pages/06.data-sources/02.ajax/docs.md index 4dd177e1..060bcd8f 100644 --- a/pages/06.data-sources/02.ajax/docs.md +++ b/pages/06.data-sources/02.ajax/docs.md @@ -37,7 +37,7 @@ You can configure how Select2 searches for remote data using the `ajax` option. ## Request parameters -Select2 will issue a request to the specified URL when the user opens the control (unless there is a `minimumInputLength` set), and again every time the user types in the search box. By default, it will send the following as query string parameters: +Select2 will issue a request to the specified URL when the user opens the control (unless there is a `minimumInputLength` set as a Select2 option), and again every time the user types in the search box. By default, it will send the following as query string parameters: - `term` : The current search term in the search box. - `q` : Contains the same contents as `term`. From 8fc2e93fd9edfe17e541065c76c446b78c29e6e5 Mon Sep 17 00:00:00 2001 From: Jonathan Berger Date: Wed, 5 Sep 2018 13:25:21 -0700 Subject: [PATCH 05/14] Improve language for required properties (#13) The existing language is a bit awkward. This change reads more cleanly, naturally, and accurately. --- pages/06.data-sources/01.formats/docs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/06.data-sources/01.formats/docs.md b/pages/06.data-sources/01.formats/docs.md index befadeab..73d044b2 100644 --- a/pages/06.data-sources/01.formats/docs.md +++ b/pages/06.data-sources/01.formats/docs.md @@ -24,7 +24,7 @@ Select2 can render programmatically supplied data from an array or remote data s } ``` -Each object should contain, _at a minimum_, an `id` and a `text` property. Any additional parameters passed in with data objects will be included on the data objects that Select2 exposes. +Select2 requires that each object contain an `id` and a `text` property. Additional parameters passed in with data objects will be included on the data objects that Select2 exposes. The response object may also contain pagination data, if you would like to use the "infinite scroll" feature. This should be specified under the `pagination` key. From 3b44ae29973d77455b354692b207e20f1116b75e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20=C5=9Amia=C5=82ek?= Date: Wed, 5 Sep 2018 22:27:59 +0200 Subject: [PATCH 06/14] Add info about the new `clear` event (#3) Related to pull request #5058 in `select2/select2`. --- pages/12.programmatic-control/04.events/docs.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/pages/12.programmatic-control/04.events/docs.md b/pages/12.programmatic-control/04.events/docs.md index 08f34d44..26350d3f 100644 --- a/pages/12.programmatic-control/04.events/docs.md +++ b/pages/12.programmatic-control/04.events/docs.md @@ -23,6 +23,8 @@ Select2 will trigger a few different events when different actions are taken usi | `select2:select` | Triggered whenever a result is selected. `select2:selecting` is fired before this and can be prevented. | | `select2:unselecting` | Triggered before a selection is removed. This event can be prevented. | | `select2:unselect` | Triggered whenever a selection is removed. `select2:unselecting` is fired before this and can be prevented. | +| `select2:clearing` | Triggered before all selections are cleared. This event can be prevented. | +| `select2:clear` | Triggered whenever all selections are cleared. `select2:clearing` is fired before this and can be prevented. | ## Listening for events From 165f9459378c0c5699fdc79e391129fd754000cc Mon Sep 17 00:00:00 2001 From: Pedro Felipe de Azevedo Furtado Date: Wed, 5 Sep 2018 17:35:04 -0300 Subject: [PATCH 07/14] Update docs.md --- pages/03.configuration/01.options-api/docs.md | 1 + 1 file changed, 1 insertion(+) diff --git a/pages/03.configuration/01.options-api/docs.md b/pages/03.configuration/01.options-api/docs.md index 081dc6ce..63d3e863 100644 --- a/pages/03.configuration/01.options-api/docs.md +++ b/pages/03.configuration/01.options-api/docs.md @@ -49,3 +49,4 @@ This is a list of all the Select 2 configuration options. | `tokenizer` | callback | | A callback that handles [automatic tokenization of free-text entry](/tagging#automatic-tokenization-into-tags). | | `tokenSeparators` | array | `[]` | The list of characters that should be used as token separators. | | `width` | string | `resolve` | Supports [customization of the container width](/appearance#container-width). | +| `scrollAfterSelect` | boolean | `true` | If `true`, resolves issue for multiselects using `closeOnSelect: false` that caused the list of results to scroll to the first selection after each select/unselect (see https://github.com/select2/select2/pull/5150). This behaviour was intentional to deal with infinite scroll UI issues (if you need this behavior, set `false`) but it created an issue with multiselect dropdown boxes of fixed length. This pull request adds a configurable option to toggle between these two desirable behaviours. | From 9ffcc260a0729712c06378021c86ed895cf5a61b Mon Sep 17 00:00:00 2001 From: ellenhutchings Date: Wed, 12 Sep 2018 04:17:12 +0930 Subject: [PATCH 08/14] Add migration rename information (#22) Include information on the createSearchChoice -> createTag, selectOnBlur -> selectOnClose changes within migration page --- pages/15.upgrading/02.migrating-from-35/docs.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/pages/15.upgrading/02.migrating-from-35/docs.md b/pages/15.upgrading/02.migrating-from-35/docs.md index 43400169..8e9ff384 100644 --- a/pages/15.upgrading/02.migrating-from-35/docs.md +++ b/pages/15.upgrading/02.migrating-from-35/docs.md @@ -275,6 +275,22 @@ Select2 previously provided multiple options for formatting the results list and You should refer to the updated documentation on templates for [results](/dropdown) and [selections](/selections) when migrating from previous versions of Select2. +### Renamed `createSearchChoice` + +This method has been renamed to `createTag`. You should refer to the documentation on [option creation](/tagging#tag-properties) when migrating from previous versions of Select2. + +The `createSearchChoicePosition` option has been removed in favor of the `insertTag` function. New tags are added to the bottom of the list by default. +``` +insertTag: function (data, tag) { + // Insert the tag at the end of the results + data.push(tag); +} +``` + +### Renamed `selectOnBlur` + +This method has been renamed to `selectOnClose`. + ### The `id` and `text` properties are strictly enforced When working with array and AJAX data in the past, Select2 allowed a custom `id` function or attribute to be set in various places, ranging from the initialization of Select2 to when the remote data was being returned. This allowed Select2 to better integrate with existing data sources that did not necessarily use the `id` attribute to indicate the unique identifier for an object. From f546886b92eddb65910213ec2a9900a90a7d5485 Mon Sep 17 00:00:00 2001 From: Pedro Felipe de Azevedo Furtado Date: Sat, 15 Sep 2018 00:13:08 -0300 Subject: [PATCH 09/14] Update docs.md --- pages/03.configuration/01.options-api/docs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/03.configuration/01.options-api/docs.md b/pages/03.configuration/01.options-api/docs.md index 63d3e863..06af83c7 100644 --- a/pages/03.configuration/01.options-api/docs.md +++ b/pages/03.configuration/01.options-api/docs.md @@ -49,4 +49,4 @@ This is a list of all the Select 2 configuration options. | `tokenizer` | callback | | A callback that handles [automatic tokenization of free-text entry](/tagging#automatic-tokenization-into-tags). | | `tokenSeparators` | array | `[]` | The list of characters that should be used as token separators. | | `width` | string | `resolve` | Supports [customization of the container width](/appearance#container-width). | -| `scrollAfterSelect` | boolean | `true` | If `true`, resolves issue for multiselects using `closeOnSelect: false` that caused the list of results to scroll to the first selection after each select/unselect (see https://github.com/select2/select2/pull/5150). This behaviour was intentional to deal with infinite scroll UI issues (if you need this behavior, set `false`) but it created an issue with multiselect dropdown boxes of fixed length. This pull request adds a configurable option to toggle between these two desirable behaviours. | +| `scrollAfterSelect` | boolean | `false` | If `true`, resolves issue for multiselects using `closeOnSelect: false` that caused the list of results to scroll to the first selection after each select/unselect (see https://github.com/select2/select2/pull/5150). This behaviour was intentional to deal with infinite scroll UI issues (if you need this behavior, set `false`) but it created an issue with multiselect dropdown boxes of fixed length. This pull request adds a configurable option to toggle between these two desirable behaviours. | From d86894d8907c1a1c2caf5d7684679ad0b8f6ea5b Mon Sep 17 00:00:00 2001 From: niftylettuce Date: Mon, 17 Sep 2018 11:51:04 -0500 Subject: [PATCH 10/14] Added documentation example for BS3 modal shown event binding (#12) * Added documentation example for https://github.com/select2/select2/issues/5189 * Update docs.md --- pages/07.dropdown/docs.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/pages/07.dropdown/docs.md b/pages/07.dropdown/docs.md index f20138be..68a7149b 100644 --- a/pages/07.dropdown/docs.md +++ b/pages/07.dropdown/docs.md @@ -92,6 +92,22 @@ $('#mySelect2').select2({ This is useful when attempting to render Select2 correctly inside of modals and other small containers. If you're having trouble using the search box inside a Bootstrap modal, for example, trying setting the `dropdownParent` option to the modal element. +If you are rendering a Select2 inside of a modal (Bootstrap 3.x) that has not yet been rendered or opened, you may need to bind to the `shown.bs.modal` event: + +``` +$('body').on('shown.bs.modal', '.modal', function() { + $(this).find('select').each(function() { + var dropdownParent = $(document.body); + if ($(this).parents('.modal.in:first').length !== 0) + dropdownParent = $(this).parents('.modal.in:first'); + $(this).select2({ + dropdownParent: dropdownParent + // ... + }); + }); +}); +``` + If you run into positioning issues while using the default `body` attachment, you may find it helpful to use your browser console to inspect the values of: - `document.body.style.position` From ad0451d2fd7f7bed70ece586bac71186f19167f4 Mon Sep 17 00:00:00 2001 From: Patrizio Bekerle Date: Wed, 5 Jun 2019 01:54:11 +0200 Subject: [PATCH 11/14] Fix a typo (#34) --- pages/06.data-sources/02.ajax/docs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/06.data-sources/02.ajax/docs.md b/pages/06.data-sources/02.ajax/docs.md index 060bcd8f..f6de8de1 100644 --- a/pages/06.data-sources/02.ajax/docs.md +++ b/pages/06.data-sources/02.ajax/docs.md @@ -74,7 +74,7 @@ $('#mySelect2').select2({ ajax: { url: '/example/api', processResults: function (data) { - // Tranforms the top-level key of the response object from 'items' to 'results' + // Transforms the top-level key of the response object from 'items' to 'results' return { results: data.items }; From 1c394a421b76f26b8923a9634437b99fb6bffec3 Mon Sep 17 00:00:00 2001 From: Kevin Brown Date: Wed, 10 Jul 2019 00:00:02 -0400 Subject: [PATCH 12/14] Fix XSS issue in templating example --- pages/08.selections/docs.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/pages/08.selections/docs.md b/pages/08.selections/docs.md index d563450d..5f79efac 100644 --- a/pages/08.selections/docs.md +++ b/pages/08.selections/docs.md @@ -25,10 +25,16 @@ function formatState (state) { if (!state.id) { return state.text; } + var baseUrl = "{{ url('user://pages/images/flags') }}"; var $state = $( - ' ' + state.text + '' + ' ' ); + + // Use .text() instead of HTML string concatenation to avoid script injection issues + $state.find("span").text(state.text); + $state.find("img").attr("src", baseUrl + "/" + state.element.value.toLowerCase() + ".png"); + return $state; }; From 1f79acbe5ffa651dfdbed70d6c955c2ee4447cfa Mon Sep 17 00:00:00 2001 From: Kevin Brown Date: Wed, 10 Jul 2019 00:25:40 -0400 Subject: [PATCH 13/14] Fix XSS issue in AJAX example --- pages/06.data-sources/02.ajax/docs.md | 36 +++++++++++++++------------ 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/pages/06.data-sources/02.ajax/docs.md b/pages/06.data-sources/02.ajax/docs.md index f6de8de1..70aa31b2 100644 --- a/pages/06.data-sources/02.ajax/docs.md +++ b/pages/06.data-sources/02.ajax/docs.md @@ -309,7 +309,6 @@ $(".js-example-data-ajax").select2({ cache: true }, placeholder: 'Search for a repository', - escapeMarkup: function (markup) { return markup; }, // let our custom formatter work minimumInputLength: 1, templateResult: formatRepo, templateSelection: formatRepoSelection @@ -320,23 +319,28 @@ function formatRepo (repo) { return repo.text; } - var markup = "
" + - "
" + - "
" + - "
" + repo.full_name + "
"; + var $container = $( + "
" + + "
" + + "
" + + "
" + + "
" + + "
" + + "
" + + "
" + + "
" + + "
" + + "
" + + "
" + ); - if (repo.description) { - markup += "
" + repo.description + "
"; - } + $container.find(".select2-result-repository__title").text(repo.full_name); + $container.find(".select2-result-repository__description").text(repo.description); + $container.find(".select2-result-repository__forks").append(repo.forks_count + " Forks"); + $container.find(".select2-result-repository__stargazers").append(repo.stargazers_count + " Stars"); + $container.find(".select2-result-repository__watchers").append(repo.watchers_count + " Watchers"); - markup += "
" + - "
" + repo.forks_count + " Forks
" + - "
" + repo.stargazers_count + " Stars
" + - "
" + repo.watchers_count + " Watchers
" + - "
" + - "
"; - - return markup; + return $container; } function formatRepoSelection (repo) { From dd90704377478a7f65efa8f933238af2747ceb68 Mon Sep 17 00:00:00 2001 From: Kevin Brown Date: Sat, 20 Jul 2019 23:22:02 -0400 Subject: [PATCH 14/14] Bump versions for Select2 4.0.8 release --- pages/01.getting-started/01.installation/docs.md | 4 ++-- pages/13.i18n/docs.md | 2 +- themes/site/templates/partials/base.html.twig | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/pages/01.getting-started/01.installation/docs.md b/pages/01.getting-started/01.installation/docs.md index 99181507..2ba240db 100644 --- a/pages/01.getting-started/01.installation/docs.md +++ b/pages/01.getting-started/01.installation/docs.md @@ -13,8 +13,8 @@ A CDN (content delivery network) is the fastest way to get up and running with S Select2 is hosted on both the [cdnjs](https://cdnjs.com/libraries/select2) and [jsDelivr](https://www.jsdelivr.com/#!select2) CDNs. Simply include the following lines of code in the `` section of your page: ``` - - + + ``` >>> Immediately following a new release, it takes some time for CDNs to catch up and get the new versions live on the CDN. diff --git a/pages/13.i18n/docs.md b/pages/13.i18n/docs.md index 950ed900..8a57d825 100644 --- a/pages/13.i18n/docs.md +++ b/pages/13.i18n/docs.md @@ -7,7 +7,7 @@ process: never_cache_twig: true --- -{% do assets.addJs('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/i18n/es.js', 90) %} +{% do assets.addJs('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/i18n/es.js', 90) %} ## Message translations diff --git a/themes/site/templates/partials/base.html.twig b/themes/site/templates/partials/base.html.twig index 786145eb..a1df0646 100644 --- a/themes/site/templates/partials/base.html.twig +++ b/themes/site/templates/partials/base.html.twig @@ -17,7 +17,7 @@ {% do assets.addCss('theme://css/custom.css',100) %} {% do assets.addCss('theme://css/font-awesome.min.css',100) %} {% do assets.addCss('theme://css/featherlight.min.css') %} - {% do assets.addCss('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css') %} + {% do assets.addCss('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css') %} {% do assets.addCss('theme://css/s2-docs.css', 100) %} {% do assets.addCss('theme://css/theme.css',100) %} @@ -33,7 +33,7 @@ {% block javascripts %} {% do assets.addJs('jquery',101) %} {% do assets.addJs('theme://js/modernizr.custom.71422.js',100) %} - {% do assets.addJs('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.full.min.js', 100) %} + {% do assets.addJs('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.full.min.js', 100) %} {% do assets.addJs('https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js', 100) %} {% do assets.addJs('theme://js/featherlight.min.js') %} {% do assets.addJs('theme://js/clipboard.min.js') %}