#How to add data attributes with statePath to a custom Select component in Filament v4?

2 messages · Page 1 of 1 (latest)

tender jolt
#

I'm trying to create a custom UserSelect component that extends Select and needs to add a data-state-path attribute to the wrapper element for JavaScript interaction.

The problem: When I try to access $this->getStatePath() in setUp() or in a closure passed to extraAttributes(), I get:

Typed property Filament\Schemas\Components\Component::$container must not be accessed before initialization

What I've tried:

class UserSelect extends Select
{
protected function setUp(): void
{
parent::setUp();

      // Attempt 1: Direct - fails during setUp
      $this->extraAttributes([
          'data-state-path' => $this->getStatePath(), // Error: container not initialized
      ]);

      // Attempt 2: Closure - still fails
      $this->extraAttributes(function () {
          return [
              'data-state-path' => $this->getStatePath(), // Same error
          ];
      });
  }

}

What I need: A way to add data-state-path="{statePath}" to the component's wrapper div so JavaScript can read it.

Use case: I'm building a paste handler that intercepts paste events on multi-select user fields and needs to know the state path to call a Livewire method that updates the field's value.

Is there a lifecycle hook or method that runs after the container is initialized where I can safely access getStatePath()? Or is there a different approach for this in v4?

tawdry monolithBOT
#

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution