Losing focus on TextInput class in actions form.

I have a scenario, not sure if it is a bug or I am missing something, to be honest.

Group::make()->schema([
     Select::make('projectId')
         ->label('Project')
         ->options(function () {
             return Cache::remember('projects', 60, function() {
                 return Project::all()->pluck('name', 'id');
             });
         })
         ->searchable()
         ->preload()
         ->required(),

     Select::make('taskId')
         ->label('Task')
         ->options(function () {
             return Cache::remember('tasks', 60, function() {
                 return Task::all()->pluck('name', 'id');
             });
         })
         ->searchable()
         ->preload()
         ->required(),

     Textarea::make('notes')
        ->required()
        ->rows(4)
        ->columnSpan(2),

     TextInput::make('starts_at')
         ->required()
         ->numeric()
         ->maxLength(4)
         ->minLength(4)
         ->live(debounce: 500)
         ->afterStateUpdated(function (Set $set, ?string $state){
             if (strlen($state) === 4) {
                 return $set('starts_at', $this->formatTime($state));
             }
         }),

     TextInput::make('ends_at')
         ->required()
         ->numeric()
         ->maxLength(4)
         ->minLength(4)
         ->live(debounce: 500)
         ->afterStateUpdated(function (Set $set, ?string $state){
             if (strlen($state) === 4) {
                 return $set('ends_at', $this->formatTime($state));
             }
         }),
 ])->columns(2)

Group::make()->schema([
     Select::make('projectId')
         ->label('Project')
         ->options(function () {
             return Cache::remember('projects', 60, function() {
                 return Project::all()->pluck('name', 'id');
             });
         })
         ->searchable()
         ->preload()
         ->required(),

     Select::make('taskId')
         ->label('Task')
         ->options(function () {
             return Cache::remember('tasks', 60, function() {
                 return Task::all()->pluck('name', 'id');
             });
         })
         ->searchable()
         ->preload()
         ->required(),

     Textarea::make('notes')
        ->required()
        ->rows(4)
        ->columnSpan(2),

     TextInput::make('starts_at')
         ->required()
         ->numeric()
         ->maxLength(4)
         ->minLength(4)
         ->live(debounce: 500)
         ->afterStateUpdated(function (Set $set, ?string $state){
             if (strlen($state) === 4) {
                 return $set('starts_at', $this->formatTime($state));
             }
         }),

     TextInput::make('ends_at')
         ->required()
         ->numeric()
         ->maxLength(4)
         ->minLength(4)
         ->live(debounce: 500)
         ->afterStateUpdated(function (Set $set, ?string $state){
             if (strlen($state) === 4) {
                 return $set('ends_at', $this->formatTime($state));
             }
         }),
 ])->columns(2)

I have a pretty basic form group within an action the problem comes around when I type in notes and then start to add a start at time, when the state is updated the focus of the input is lost. It only happens when I update notes, and then start at. Hoping someone can say I have done something wrong rather than me making a whole bug report. ~screenshot just shows where it lost its focus. at the time of typing out a starts_at

3 Replies

Aaron LawrenceOP•16mo ago

Worth noting, that the format time just returns a string.

public function formatTime($userTime): ?string
    {
        if (strlen($userTime) === 4) {
            $formattedTime = $userTime;

            if (!empty($userTime)) {

                $userCarbon = Carbon::parse($userTime);

                // Round minutes up
                $roundedMinutes = ceil($userCarbon->minute / 15) * 15;

                $userCarbon->setTime($userCarbon->hour, $roundedMinutes);

                // Validate time is within 24 hour range
                if ($userCarbon->hour >= 0 && $userCarbon->hour < 24 && $userCarbon->minute >= 0 && $userCarbon->minute < 60) {
                    $formattedTime = $userCarbon->format('H:i');
                }
            }

            return str_replace(':', '', $formattedTime);
        }

        return $userTime;
    }

public function formatTime($userTime): ?string
    {
        if (strlen($userTime) === 4) {
            $formattedTime = $userTime;

            if (!empty($userTime)) {

                $userCarbon = Carbon::parse($userTime);

                // Round minutes up
                $roundedMinutes = ceil($userCarbon->minute / 15) * 15;

                $userCarbon->setTime($userCarbon->hour, $roundedMinutes);

                // Validate time is within 24 hour range
                if ($userCarbon->hour >= 0 && $userCarbon->hour < 24 && $userCarbon->minute >= 0 && $userCarbon->minute < 60) {
                    $formattedTime = $userCarbon->format('H:i');
                }
            }

            return str_replace(':', '', $formattedTime);
        }

        return $userTime;
    }

LeandroFerreira•16mo ago

What about this? ->live(onBlur: true)

Aaron LawrenceOP•16mo ago

Still the same, unfortunately.

Gaming

Programming

Losing focus on TextInput class in actions form.