If the widget is present when the widget admin page loads, the controls work correctly.
If I save the new widget, when the form reloads, the controls are created correctly and now work.
Refreshing the page also fixes the issue, but only for existing widgets. New widgets have this issue still.
Specifically I'm running selectize on select inputs at these points:
- document ready
I've verified that my code is run on each event as desired, but the results are not as expected.
Here is a test plugin that demonstrates the issue:
You'll see I have a counter that increases with every select element it finds that it can convert.
- When the widget page loads, I can see the counter increasing in the JS console as expected
- When I add a new widget, the code is run, however, it fails to find any select elements it can run on, as demonstrated by found.length being 0. This should not be the case, as every new widget of that type should have a select element
- select elements have a class to identify them, this class is removed once the selectize library is applied to prevent duplication and re-processing on existing widgets.
- Prior to using selectize, I used Select2, which had the same issue
- Commenting out the AJAX code, I would expect new widgets to have a standard select input. They do not. I don't know why this is the case
So how do I make the selectize control work without telling the user to refresh/click save prior to making changes?