Skip to content

Commit e186a23

Browse files
KocalKocal
committed
feature #401 [Autocomplete] Allow plugins to be disabled through tom_select_options.plugins.<plugin> = false (Kocal)
This PR was merged into the 2.x branch. Discussion ---------- [Autocomplete] Allow plugins to be disabled through `tom_select_options.plugins.<plugin> = false` | Q | A | ------------- | --- | Bug fix? | no | New feature? | no | Tickets | Fix #379 | License | MIT When plugins option is defined Symfony UX will no longer add some plugins by default. This make it possible to render a autocomplete without clear button extensions for example. Commits ------- 29486c8 [Autocomplete] Allow plugins to be disabled through `tom_select_options.plugins.<plugin> = false`
2 parents 564cca1 + 29486c8 commit e186a23

File tree

4 files changed

+169
-5
lines changed

4 files changed

+169
-5
lines changed

‎src/Autocomplete/CHANGELOG.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,33 @@
11
# CHANGELOG
22

3+
## 2.28.0
4+
5+
- Default plugins like `clear_button` or `remove_button` can now be removed when setting their value to `false` in the `tom_select_options.plugins` option, for example:
6+
```php
7+
<?php
8+
#[AsEntityAutocompleteField]
9+
class IngredientAutocompleteType extends AbstractType
10+
{
11+
public function configureOptions(OptionsResolver $resolver): void
12+
{
13+
$resolver->setDefaults([
14+
'class' => Ingredient::class,
15+
'tom_select_options' => [
16+
'plugins' => [
17+
'clear_button' => false, // Disable the clear button
18+
'remove_button' => false, // Disable the remove button
19+
],
20+
],
21+
]);
22+
}
23+
24+
public function getParent(): string
25+
{
26+
return BaseEntityAutocompleteType::class;
27+
}
28+
}
29+
```
30+
331
## 2.25.0
432

533
- Escape `querySelector` dynamic selector with `CSS.escape()` #2663

‎src/Autocomplete/assets/dist/controller.js

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
2929
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
3030
};
3131

32-
var _default_1_instances, _default_1_getCommonConfig, _default_1_createAutocomplete, _default_1_createAutocompleteWithHtmlContents, _default_1_createAutocompleteWithRemoteData, _default_1_stripTags, _default_1_mergeConfigs, _default_1_normalizePluginsToHash, _default_1_createTomSelect;
32+
var _default_1_instances, _default_1_getCommonConfig, _default_1_createAutocomplete, _default_1_createAutocompleteWithHtmlContents, _default_1_createAutocompleteWithRemoteData, _default_1_stripTags, _default_1_mergeConfigs, _default_1_normalizePluginsToHash, _default_1_normalizePlugins, _default_1_createTomSelect;
3333
class default_1 extends Controller {
3434
constructor() {
3535
super(...arguments);
@@ -382,11 +382,18 @@ _default_1_normalizePluginsToHash = new WeakMap(), _default_1_instances = new We
382382
return {
383383
...config1,
384384
...config2,
385-
plugins: {
385+
plugins: __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_normalizePlugins).call(this, {
386386
...__classPrivateFieldGet(this, _default_1_normalizePluginsToHash, "f").call(this, config1.plugins || {}),
387387
...__classPrivateFieldGet(this, _default_1_normalizePluginsToHash, "f").call(this, config2.plugins || {}),
388-
},
388+
}),
389389
};
390+
}, _default_1_normalizePlugins = function _default_1_normalizePlugins(plugins) {
391+
return Object.entries(plugins).reduce((acc, [pluginName, pluginOptions]) => {
392+
if (pluginOptions !== false) {
393+
acc[pluginName] = pluginOptions;
394+
}
395+
return acc;
396+
}, {});
390397
}, _default_1_createTomSelect = function _default_1_createTomSelect(options) {
391398
const preConnectPayload = { options };
392399
this.dispatchEvent('pre-connect', preConnectPayload);

‎src/Autocomplete/assets/src/controller.ts

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -330,10 +330,10 @@ export default class extends Controller {
330330
...config1,
331331
...config2,
332332
// Plugins from both configs should be merged together.
333-
plugins: {
333+
plugins: this.#normalizePlugins({
334334
...this.#normalizePluginsToHash(config1.plugins || {}),
335335
...this.#normalizePluginsToHash(config2.plugins || {}),
336-
},
336+
}),
337337
};
338338
}
339339

@@ -358,6 +358,16 @@ export default class extends Controller {
358358
return plugins;
359359
};
360360

361+
#normalizePlugins(plugins: TPluginHash): TPluginHash {
362+
return Object.entries(plugins).reduce((acc, [pluginName, pluginOptions]) => {
363+
if (pluginOptions !== false) {
364+
acc[pluginName] = pluginOptions;
365+
}
366+
367+
return acc;
368+
}, {} as TPluginHash);
369+
}
370+
361371
/**
362372
* Returns the element, but only if it's a select element.
363373
*/

‎src/Autocomplete/assets/test/controller.test.ts

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -994,4 +994,123 @@ describe('AutocompleteController', () => {
994994
await shortDelay(10);
995995
expect(wasReset).toBe(false);
996996
});
997+
998+
it('must disable default plugin "clear_button"', async () => {
999+
const { tomSelect } = await startAutocompleteTest(`
1000+
<select data-testid='main-element' data-controller='autocomplete'>
1001+
<option value='1'>dog1</option>
1002+
<option value='2'>dog2</option>
1003+
<option value='3'>dog3</option>
1004+
</select>
1005+
`);
1006+
1007+
expect(tomSelect.plugins.names, 'The plugin "clear_button" must be present by default.').toEqual([
1008+
'clear_button',
1009+
]);
1010+
1011+
const { tomSelect: tomSelect2 } = await startAutocompleteTest(`
1012+
<select
1013+
data-testid='main-element'
1014+
data-controller='autocomplete'
1015+
data-autocomplete-tom-select-options-value="{&quot;plugins&quot;:{&quot;clear_button&quot;:false}}"
1016+
>
1017+
<option value='1'>dog1</option>
1018+
<option value='2'>dog2</option>
1019+
<option value='3'>dog3</option>
1020+
</select>
1021+
`);
1022+
1023+
expect(tomSelect2.plugins.names, 'The plugin "clear_button" must not be present.').toEqual([]);
1024+
});
1025+
1026+
it('must disable default plugin "remove_button"', async () => {
1027+
const { tomSelect } = await startAutocompleteTest(`
1028+
<select multiple data-testid='main-element' data-controller='autocomplete'>
1029+
<option value='1'>dog1</option>
1030+
<option value='2'>dog2</option>
1031+
<option value='3'>dog3</option>
1032+
</select>
1033+
`);
1034+
1035+
expect(tomSelect.plugins.names, 'The plugin "remove_button" must be present by default.').toEqual([
1036+
'remove_button',
1037+
]);
1038+
1039+
const { tomSelect: tomSelect2 } = await startAutocompleteTest(`
1040+
<select
1041+
multiple
1042+
data-testid='main-element'
1043+
data-controller='autocomplete'
1044+
data-autocomplete-tom-select-options-value="{&quot;plugins&quot;:{&quot;remove_button&quot;:false}}"
1045+
>
1046+
<option value='1'>dog1</option>
1047+
<option value='2'>dog2</option>
1048+
<option value='3'>dog3</option>
1049+
</select>
1050+
`);
1051+
1052+
expect(tomSelect2.plugins.names, 'The plugin "remove_button" must not be present.').toEqual([]);
1053+
});
1054+
1055+
it('adding a plugin should merge it with the common plugins list', async () => {
1056+
const { tomSelect } = await startAutocompleteTest(`
1057+
<select data-testid='main-element' data-controller='autocomplete'>
1058+
<option value='1'>dog1</option>
1059+
<option value='2'>dog2</option>
1060+
<option value='3'>dog3</option>
1061+
</select>
1062+
`);
1063+
1064+
expect(tomSelect.plugins.names, 'The plugin "remove_button" must be present by default.').toEqual([
1065+
'clear_button',
1066+
]);
1067+
1068+
const { tomSelect: tomSelect2 } = await startAutocompleteTest(`
1069+
<select
1070+
data-testid='main-element'
1071+
data-controller='autocomplete'
1072+
data-autocomplete-tom-select-options-value="{&quot;plugins&quot;:[&quot;input_autogrow&quot;]}"
1073+
>
1074+
<option value='1'>dog1</option>
1075+
<option value='2'>dog2</option>
1076+
<option value='3'>dog3</option>
1077+
</select>
1078+
`);
1079+
1080+
expect(tomSelect2.plugins.names, 'The plugin "input_autogrow" must be present too.').toEqual([
1081+
'clear_button',
1082+
'input_autogrow',
1083+
]);
1084+
});
1085+
1086+
it('adding a plugin (with configuration) should merge it with the common plugins list', async () => {
1087+
const { tomSelect } = await startAutocompleteTest(`
1088+
<select data-testid='main-element' data-controller='autocomplete'>
1089+
<option value='1'>dog1</option>
1090+
<option value='2'>dog2</option>
1091+
<option value='3'>dog3</option>
1092+
</select>
1093+
`);
1094+
1095+
expect(tomSelect.plugins.names, 'The plugin "remove_button" must be present by default.').toEqual([
1096+
'clear_button',
1097+
]);
1098+
1099+
const { tomSelect: tomSelect2 } = await startAutocompleteTest(`
1100+
<select
1101+
data-testid='main-element'
1102+
data-controller='autocomplete'
1103+
data-autocomplete-tom-select-options-value="{&quot;plugins&quot;:{&quot;input_autogrow&quot;:true}}"
1104+
>
1105+
<option value='1'>dog1</option>
1106+
<option value='2'>dog2</option>
1107+
<option value='3'>dog3</option>
1108+
</select>
1109+
`);
1110+
1111+
expect(tomSelect2.plugins.names, 'The plugin "input_autogrow" must be present too.').toEqual([
1112+
'clear_button',
1113+
'input_autogrow',
1114+
]);
1115+
});
9971116
});

0 commit comments

Comments
 (0)