Select fields not selectized when dynamically added

[fredrikekelund]

I have a blueprint with a couple of nested lists that contain both select and pagemediaselect type fields. When I edit a page in the admin panel and add new entries to these lists, the <select> elements (for both types of fields) in the new entry aren't "selectized" - ie. they don't get the nice text filtering and styling etc.

[flaviocopes]

Using Grav 1.1RC (and Admin 1.1) or 1.0.10?

[fredrikekelund]

Sorry, really should've specified that! Using Grav v1.1.0-rc.3 - Admin v1.1.0-rc.4

[w00fz]

I tested with a nested list and a selectize field but it still renders 'selectized' when i add new items.
Any chance you could paste your yaml or an equivalent broken example in here?

Also, what OS and Browser were you testing on?

[fredrikekelund]

Both Firefox 47 and Chrome 51 exhibit the same problem for me. Sorry, just to clarify: I'm not using the selectize field type, but rather the select type. Those elements get a kind of basic selectize transformation as well (from what I could gather by inspecting the DOM in dev tools).

When I click to add new select elements, they look almost identical to the selectized ones when not expanded, but the selectized ones have built-in filtering and a nicely styled dropdown.

Sure, here's my YAML:

title: Groups
'@extends': default

form:
  fields:
    tabs:
      type: tabs

      fields:
        group:
          type: tab
          title: Groups

          fields:
            header.groups:
              name: groups
              type: list
              btnLabel: "Add group"
              style: vertical
              label: Groups

              fields:
                .wrappers:
                  name: wrappers
                  type: list
                  btnLabel: "Add wrapper"
                  style: vertical
                  label: Wrappers

                  fields:
                    .height:
                      type: select
                      size: long
                      label: Height
                      options:
                        full: Full
                        half: Half
                    .images:
                      name: images
                      type: list
                      btnLabel: "Add image"
                      style: vertical
                      label: Images

                      fields:
                        .image:
                          type: pagemediaselect
                          label: Image
                        .width:
                          type: select
                          size: long
                          label: Width
                          options:
                            full: Full
                            half: Half

[w00fz]

I think that's the problem. Using just type: select is not enough to making it a selectize, you need to use the classes: fancy to make it so:

ie,

.width:
  type: select
  classes: fancy
  size: long
  label: Width
  options:
    full: Full
    half: Half

[fredrikekelund]

@w00fz hmm I tried adding that class, but it didn't make a difference. All the fields that were there on page load were still transformed with selectize, and the ones that I added dynamically were not. So it looks like an inconcistency between those two.

[w00fz]

I could reproduce the issue with your YAML above, but after adding the classes: fancy and clearing cache, they showed up selectized as expected. Really all I can think of is that you need to clear cache.

Updated YAML

title: Selectize
'@extends': default

title: Groups
'@extends': default

form:
  fields:
    tabs:
      type: tabs

      fields:
        group:
          type: tab
          title: Groups

          fields:
            header.groups:
              name: groups
              type: list
              btnLabel: "Add group"
              style: vertical
              label: Groups

              fields:
                .wrappers:
                  name: wrappers
                  type: list
                  btnLabel: "Add wrapper"
                  style: vertical
                  label: Wrappers

                  fields:
                    .height:
                      type: select
                      classes: fancy
                      size: long
                      label: Height
                      options:
                        full: Full
                        half: Half
                    .images:
                      name: images
                      type: list
                      btnLabel: "Add image"
                      style: vertical
                      label: Images

                      fields:
                        .image:
                          type: pagemediaselect
                          classes: fancy
                          label: Image
                        .width:
                          type: select
                          classes: fancy
                          size: long
                          label: Width
                          options:
                            full: Full
                            half: Half

[fredrikekelund]

You're right! Applying the "fancy" class and clearing the cache did the trick, for both select and pagemediaselect inputs.

But it's still an incosistency that the elements that are there on page load get the "fancy" treatment without the "fancy" class, no?

[w00fz]

You are right, this was an inconsistency. I fixed it now, they will get the same treatment.

[fredrikekelund]

It looks like there has been a regression here. I'm encountering this issue again with Grav v1.1.5 - Admin v1.2.2

[fredrikekelund]

Never mind my last comment, saw that this was reported again in #773 and that issue has been fixed 👍