Skip to content

Switching localization throws this.options is not iterable in relationship SelectField #15484

Description

@aerni

Bug description

Switching an entry to another existing localization throws a Vue render error on relationship fields that use the select UI (users, terms with mode: select, etc.).

The publish form still loads the other locale, but the console fills with:

TypeError: this.options is not iterable
    at Proxy.comboboxOptions

Expected: switching site just reloads values/meta. Relationship selects should keep working.

This comes from resources/js/components/inputs/relationship/SelectField.vue. cacheKey includes site. On locale switch, an already-mounted SelectField starts a new options request and a shared cache watch sets this.options to undefined before that request returns. comboboxOptions then spreads it and throws. Empty fields (items: []) hit this too.

How to reproduce

  1. Fresh Statamic 6 multi-site install (at least two sites).
  2. On a collection blueprint, add a users field, or a terms field with mode: select.
  3. Create an entry and localize it to the second site.
  4. Edit the origin entry in the CP.
  5. Switch to the other localization with the site selector.
  6. Open the browser console.

Logs

[Vue warn]: Unhandled error during execution of render function
  at <SelectField ... items= [] ...>
  at <RelationshipInput name="user" ...>
  at <RelationshipFieldtype ...>
  at <Field class="users-fieldtype" ...>

TypeError: this.options is not iterable
    at Proxy.comboboxOptions (SelectField.vue)
    at editLocalization / switchToLocalization / localizationSelected

Same error also fires for terms fields in select mode (e.g. tags).

Environment

Environment
Laravel Version: 12.69.2
PHP Version: 8.5.8
Composer Version: 2.10.2
Environment: local
Debug Mode: ENABLED
Maintenance Mode: OFF
Timezone: UTC
Locale: en

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: log
Cache: file
Database: sqlite
Logs: stack / single
Mail: log
Queue: sync
Session: file

Storage
public/storage: NOT LINKED

Statamic
Addons: 2
License Key: Not set
Sites: 3 (English, German, French)
Stache Watcher: Enabled (auto)
Static Caching: Disabled
Version: 6.33.0 PRO

Statamic Addons
aerni/advanced-seo: dev-main
statamic/eloquent-driver: 5.11.1

Installation

Fresh statamic/statamic site via CLI

Additional details

Confirmed on 6.33.0. The crashing fields are core users / terms fields; addon JS is not in the stack. Tabs are force-mounted, so it also happens when you’re on a different tab.

Cause is in SelectField.vue:

watch(
    () => loaders.value[this.cacheKey],
    (loading) => {
        this.options = optionsCache[this.cacheKey]; // undefined for a new site key
        this.requested = true;
    }
);

request() sets loaders[cacheKey] = true before the AJAX response, so the watch runs against an empty cache. comboboxOptions then does [...this.options, ...missing].

Introduced by #13514 (shared options cache). #14948 made it throw by spreading this.options. #13913 / #13925 were a different TypeError in the same component.

A robust fix is: don’t assign undefined from the cache, and treat this.options as [] in comboboxOptions.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions