Selectize All

[Robin S]

This module enables Selectize (which is bundled with the PW core) on all Select and AsmSelect inputfields in the PW admin. As described below in the readme, Selectize is initialised/destroyed as the revelant select is focused/blurred in order to support select options that change after the page is loaded. Therefore Selectize is styled to match the AdminThemeUikit select as closely as possible to minimise the visual change as the select is focused and blurred. I'm developing on Windows so I'm not sure how the module will render on other operating systems. It doesn't help that the PW admin uses different fonts depending on the OS - I wish PW would bundle its own webfont for a standardised appearance everywhere.

Incidentally, I was a bit disappointed with the state of the Selectize project. I had to fix or work around a number of bugs and shortcomings, including things you would think would just work out of the box such as disabled options, matching the width of the replaced select, or the standard select behaviour where a selection is required when there is no empty option. The Selectize issues repo is full of arbitrarily closed bug reports and pull requests and there are no updates for the last 6 years. I've tried to catch everything that would affect this module but I wouldn't be surprised if there are still some bugs.

Selectize All

Enables Selectize on all InputfieldSelect and InputfieldAsmSelect fields in the ProcessWire admin.

The module activates Selectize on the <select> element when it is focused, and destroys Selectize when the element is blurred. This allows Selectize to work on selects where the options are changed dynamically after page load depending on other field values, e.g. the "Select File" field in the CKEditor link modal or a dependent select in Page Edit.

Only AdminThemeUikit is tested and supported.

Usage

In the module config you can choose if Selectize should be used with InputfieldSelect, InputfieldAsmSelect, or both.

If you want to disable the module for a specific Select or AsmSelect inputfield you can hook SelectizeAll::allowSelectize. This method receives the Inputfield object as the first argument.

Example:

$wire->addHookAfter('SelectizeAll::allowSelectize', function(HookEvent $event) {
    $inputfield = $event->arguments(0);
    // You can also get any associated Page and Field objects via $inputfield->hasPage and $inputfield->hasField

    // Disable the module for the inputfield named "template"
    if($inputfield->name === 'template') $event->return = false;
});

 

https://github.com/Toutouwai/SelectizeAll
https://processwire.com/modules/selectize-all/

[Macrura]

Wow - super nice, and will be installing this on all of my sites! Thank You!

[joeck]

This is exactly what I have been looking for. Amazing! Thanks a lot!

[MarkE]

On 2/12/2022 at 2:31 AM, Robin S said:

This allows Selectize to work on selects where the options are changed dynamically after page load depending on other field values,

I'm obviously being a bit dim, but I'm not sure how this is supposed to be implemented. I already have a hook on getSelectablePages, using this code. Are you suggesting something different, or if not, how does this play with your module?

[Robin S]

7 hours ago, MarkE said:

I'm obviously being a bit dim, but I'm not sure how this is supposed to be implemented. I already have a hook on getSelectablePages, using this code. Are you suggesting something different, or if not, how does this play with your module?

You don't have to implement anything, it's just stating the fact that the module initialiases Selectize when a select field is focused and destroys Selectize when that field is later blurred. And the reason this is done is to support any scenario where options are changed by JavaScript after the page loads. If Selectize was initialised the "normal" way (only once when the page loads) then it wouldn't work correctly after the options changed.

[MarkE]

Thanks @Robin S. I guess I mis-read 'allows selectize' - meaning 'stops selectize messing with'. Anyway, I can confirm that the module works nicely with my hook.

(Maybe I also thought, given what a clever person you are, that you had bundled server-side select options, via AJAX, but clearly I was over-reading it).

[Fuzen]

Can this be used in FormBuilder forms?

[Robin S]

35 minutes ago, fuzenco said:

Can this be used in FormBuilder forms?

No, afraid not - it's for the PW admin.

[MarkE]

Hi @Robin S - I have run into a problem with this module as it seems to intefere with htmx (presumably by taking the change event hostage).

See 

 

[Robin S]

@MarkE, the SelectizeAll module itself doesn't get involved with the change event. The problem is likely to be an incompatibility between the Selectize and htmx libraries. I can't do much about that, but in the newly released SelectizeAll v0.1.2 you can disable the module for an inputfield by giving it a "no-selectize" class. So when you create a select or AsmSelect inputfield in your module you would add a line like this...

$inputfield->addClass('no-selectize');

...and then if the two modules are used together your selects/AsmSelects won't be "selectized".

[MarkE]

On 3/19/2022 at 9:46 PM, Robin S said:

$inputfield->addClass('no-selectize');

...and then if the two modules are used together your selects/AsmSelects won't be "selectized".

For some reason, this doesn't always work. However, I found that 

		$object->addClass('no-selectize', 'wrapClass');
		$object->removeClass('sa-selectize', 'wrapClass');

did the trick when just the first line did not. In fact, just the second line by itself was enough. Not sure if it's relevant, but this was on a field in a repeater matrix item.

[Robin S]

7 hours ago, MarkE said:

For some reason, this doesn't always work.

If you are adding the class in a hook rather than in an inputfield you are creating then the likely reason is that your hook is firing too late, after this module has already done its work. You would need to hook at the renderReady state and may need to adjust your hook priority to be sure of adding the class in advance of this module. Remember that this module also provides a hookable method allowing you to disable the module for specific inputfields - see the Usage section in the readme.