Filament Builder: Last edited translatable Builder content loses UUID key, becomes numeric array

[frizzant]

Package

Spatie: Translatable @ v3.3.x
Filament: Form builder @ v3.3.x

How can we help you?

Using Spatie Translatable with Filament Builder to generate repeatable fields for content on a site.

I am getting the issue, that the last edited langauge is always missing a key (other than the default 0) and also is "converted" to an array instead of an object. See the last entry "fr" which is structured differently.

After editing, it's always the last edited entry that is saved as an array instead of an object. I would convert it via something like afterStateUpdate() - but unfortunately, due to Spatie Translate i only get the object inside of the language field. So i can't transform it in a meaningful way.

(this has the negative result that Spaties Media element won't show images anymore for the content/lauguage with the missing key. If you aren't using Spatie Media in this, it's mainly a structural issue, over one that shows on the frontend in my experience.)

Did anyone else come across this, and possibly even find any kind of solution?

GeneralContent.php partial:

/**
     * Get a Filament Builder component pre-configured with common content blocks.
     *
     * @param string $title The title/name of the Builder component. Defaults to 'content'.
     * @return Builder Returns a Filament Builder instance with HeroSection and MediaText blocks.
     */
    public static function getBlocks(string $title = 'content'): Builder
    {
        return Builder::make($title)
            ->blocks([
                HeroSection::getBlock(),
                MediaText::getBlock(),
                LogoCloud::getBlock(),
                TextSection::getBlock(),
            ])
            ->collapsible()
            ->reorderable()
            ->reorderableWithDragAndDrop()
            ->reorderableWithButtons()
            ->columnSpanFull();
    }

PageResource.php partial:

 Forms\Components\Section::make('Page Content')
                            ->schema([
                                Forms\Components\TextInput::make('title')
                                    ->required()
                                    ->maxLength(255)
                                    // Update slug when title loses focus
                                    ->live(onBlur: true)
                                    // Automatically generate slug from title
                                    ->afterStateUpdated(function (Set $set, Get $get, ?string $state) {
                                        if (empty($get('slug'))) {
                                            $set('slug', Str::slug($state));
                                        }
                                    }),
                                Forms\Components\TextInput::make('slug')
                                    ->required()
                                    ->maxLength(255)
                                    ->unique(ignoreRecord: true, table: Page::class)
                                    ->helperText('The URL-friendly version of your title. Must be unique.'),
                                Textarea::make('excerpt')
                                    ->rows(3)
                                    ->maxLength(65535)
                                    ->nullable(),
                                GeneralContent::getBlocks(),
                            ])->columns(2),
                            ........

{
  "de": {
    "21fe56af-2cac-4a5c-994b-fce1b50069b2": {
      "type": "text-section",
      "data": {
        "text": "<p>German</p>"
      }
    },
    "1880da22-442a-4b8b-a0e6-f9dec67a101e": {
      "type": "media-text",
      "data": {
        "media": {
          "68bd61ca-d6a4-44f1-85d2-bb899f1bfffe": "68bd61ca-d6a4-44f1-85d2-bb899f1bfffe"
        },
        "image_collection_id": "data.content.1880da22-442a-4b8b-a0e6-f9dec67a101e.data",
        "title": "Germanum",
        "content": "<p>germanum</p>",
        "media_position": "left"
      }
    }
  },
  "en": {
    "7e7fcff7-23e1-402e-8220-84306fa6e7ef": {
      "type": "text-section",
      "data": {
        "text": "<p>English</p>"
      }
    },
    "924f4e45-de69-45e2-a073-eba670eb1069": {
      "type": "media-text",
      "data": {
        "media": {
          "4b725d5c-af02-47a6-a14a-e1a901dbd433": "4b725d5c-af02-47a6-a14a-e1a901dbd433"
        },
        "image_collection_id": "data.content.924f4e45-de69-45e2-a073-eba670eb1069.data",
        "title": "Englishum",
        "content": "<p>englishum</p>",
        "media_position": "left"
      }
    }
  },
  "fr": [
    {
      "type": "text-section",
      "data": {
        "text": "<p>French</p>"
      }
    },
    {
      "type": "media-text",
      "data": {
        "image_collection_id": "data.content.63dcf9d3-4aae-4686-9a39-a3e91bc55f05.data",
        "title": "Frenchum",
        "content": "<p>Frenchum</p>",
        "media_position": "left"
      }
    }
  ]
}

Summarized snippet of what's wrong with the object:

[MaticSulc]

I can replicate this as well - did you find any viable solutions?