Selectize-field misbehaving

[OleVik]

The recent change to the Selectize-field broke its ability to merge existing items, which had been implemented previously.

In a specific scenario, such as overriding taxonomies:

taxonomies:
  type: section
  title: PLUGIN_ADMIN.TAXONOMIES
  underline: true
  fields:
    header.taxonomy:
      unset@: true
    header.taxonomy.category:
      type: select
      label: Category
      help: Sets the state of the project
      highlight: 0
      data-options@: '\Grav\Theme\ProjectSpace::categories'
    header.taxonomy.tag:
      type: selectize
      label: Tags
      help: Applies tags to the project
      selectize:
        options:
          - text: ABC
            value: ABC
          - text: DEF
            value: DEF
          - text: GHI
            value: GHI
          - text: JKL
            value: JKL
          - text: MNO
            value: MNO
          - text: PQR
            value: PQR
          - text: STU
            value: STU
          - text: VWX
            value: VWX
          - text: YZ
            value: YZ
      validate:
        type: commalist

Using this post.md:

---
title: 'Mediator Theme Setup'
image: tools.jpg
color: red
date: '05-02-2014 00:00'
taxonomy:
    category: idea
    tag:
        - ABC
        - DEF
        - GHI
        - JKL
        - MNO
slug: theme-setup
---

Leaving out |merge({'items':value}) causes only the first item to be loaded, the subsequent values are removed when the DOM finishes loading:

Whereas adding it back in to selectize.html.twig, from:

data-grav-selectize="{{ (field.selectize is defined ? field.selectize|merge({'create': true}) : {'create': true})|json_encode()|e('html_attr') }}"

to

data-grav-selectize="{{ (field.selectize is defined ? field.selectize|merge({'create': true})|merge({'items':value}) : {'create': true})|json_encode()|e('html_attr') }}"

makes it work again:

I submit this as an issue rather than a PR to also ask about the use of selectize: options rather than just options: . The latter is more in line with blueprints generally. The logic of #1236 seems sound, but why was the reversal necessary? Seemingly for selectize-plugins, but how does that differ from the existing implementation?

[gustavneustadt]

This fixed the first instance of this issue.
The second is, when the user adds a custom option this will not be displayed after saving the page. Its because its not referenced in the selectize: options: attribute. You need somehow merging the users new inputs with the given options.

I fixed for myself like this:

{% extends "forms/field.html.twig" %}

{% block global_attributes %}
	
	{% set user_generated_options = [] %}
	{% if value is defined %}
		{% if value is not iterable %}
			{% set delimiter = (field.selectize.delimiter is defined ?  field.selectize.delimiter : ',') %}
			{% set value = value|split(delimiter) %}
		{% endif %}
		{% for item in value %}
			{% set user_generated_options = user_generated_options|merge({( field.selectize.options|length + loop.index): {'text': item, 'value': item}})%}
		{% endfor %}
	{% endif %}
	{% set all_options = field.selectize.options|merge(user_generated_options) %}

    data-grav-selectize="{{ (field.selectize is defined ? field.selectize|merge({'create': true})|merge({'items':value})|merge({'options' : all_options}) : {'create': true})|json_encode()|e('html_attr') }}"
    {{ parent() }}
{% endblock %}

{% block input_attributes %}
    type="text"
    {{ parent() }}
{% endblock %}

[rhukster]

Did this work for you too @OleVik ? PR would be great if so :)

[OleVik]

My tests work fine with the initial reversal, I've yet to understand why the reversal was implemented:

The recent change to the Selectize-field broke its ability to merge existing items, which had been implemented previously.

[w00fz]

It was reverted because it was causing other issues.
Merging in and storing custom values shouldn't be the default behavior. I have now added it as an option merge_items: true|false.