BelongsToMany field shows Two Edit buttons problem in Row

[semihkeskindev]

• Laravel Version: 10.30.1
• Nova Version: 4.29.4
• PHP Version: 8.2.11
• Database Driver & Version: MySQL 8.0
• Operating System and Version: MacOS Sonoma 14.1
• Browser type and version: Google Chrome Version 119.0.6045.105 (Official Build) (arm64)
• Reproduction Repository:

Description:

I have 2 resources:

• Product
• Company

app/Nova/Product.php

public function fields(NovaRequest $request)
    {
        return [
            BelongsToMany::make('Companies', 'companies', Company::class)
                ->fields(function ($request, \App\Models\Company|\App\Models\Product $relatedModel) {

                    return [
                        Boolean::make('X Field', 'x_field'),
                        Boolean::make('Y Field', 'y_field'),
                        Boolean::make('Z Field', 'z_field'),
                    ];
                }),
        ];
    }

app/Nova/Company.php

public function fields(NovaRequest $request)
    {
        return [
            ID::make()->sortable(),

            BelongsToMany::make('Products', 'products', Product::class)
                ->fields(function ($request, \App\Models\Company|\App\Models\Product $relatedModel) {
                    return [
                        Boolean::make('X Field', 'x_field'),
                        Boolean::make('Y Field', 'y_field'),
                        Boolean::make('Z Field', 'z_field'),
                    ];
                }),
        ];
    }

There is "BelongsToMany" relationship between the Product and Company Resource classes. The problem is that It shows me 2 edit button for "Companies Index component" on "Product detail" page like in screenshot below:

I inspected the elements:

Both of the buttons have the same link but their dusk attribute values are different:

• dusk="700000004-edit-attached-button"
• dusk="700000004-edit-button"

I also inspected vue component by searching "edit--attached-button" and "-edit-button" in laravel/nova vendor directory and I found it in vendor/laravel/nova/resources/js/components/ResourceTableRow.vue file:

<!-- Edit Pivot Button -->
        <Button
          v-if="authorizedToUpdateAnyResources && viaManyToMany"
          :as="resource.authorizedToUpdate ? 'Link' : 'Button'"
          v-tooltip.click="__('Edit Attached')"
          :aria-label="__('Edit Attached')"
          :dusk="`${resource['id'].value}-edit-attached-button`"
          @click.stop="navigateToEditView"
          icon="pencil-square"
          variant="action"
          :class="
            resource.authorizedToUpdate
              ? 'hover:text-primary-500 dark:hover:text-primary-500'
              : null
          "
          :disabled="!resource.authorizedToUpdate"
        />

        <!-- Edit Resource Link -->
        <Button
          v-if="authorizedToUpdateAnyResources" <!-- todo: I guess its because there is a missing condition? like !viaManyToMany -->
          :as="resource.authorizedToUpdate ? 'Link' : 'Button'"
          v-tooltip.click="__('Edit')"
          :aria-label="__('Edit')"
          :dusk="`${resource['id'].value}-edit-button`"
          @click.stop="navigateToEditView"
          icon="pencil-square"
          variant="action"
          :class="
            resource.authorizedToUpdate
              ? 'hover:text-primary-500 dark:hover:text-primary-500'
              : null
          "
          :disabled="!resource.authorizedToUpdate"
        />

Isn't the if condition also has to have !viaManyToManycondition for "Edit Resource Link"? Could this be the reason why two icons appear?

Extra Information

app/Models/Product.php:

 public function companies()
    {
        return $this->belongsToMany(Company::class, 'company_product', 'product_id', 'company_id')
            ->using(CompanyProduct::class)
            ->withPivot([
                'x_field',
                'y_field',
                'z_field',
            ]);
    }

app/Models/CompanyProduct.php:

class CompanyProduct extends Pivot
{
    protected $casts = [
        'x_field' => 'boolean',
        'y_field' => 'boolean',
        'z_field' => 'boolean',
        'sell_price' => 'float',
        'buy_price' => 'float',
    ];
}

app/Models/Company.php

public function products()
    {
        return $this->belongsToMany(Product::class, 'company_product', 'company_id', 'product_id')
            ->using(CompanyProduct::class)
            ->withPivot([
                'available_for_sell',
                'available_for_buy',
                'available_for_collect',
            ]);
    }

Detailed steps to reproduce the issue on a fresh Nova installation:

• Generate two Models and create BelongsToMany relationship between of them.
• Generate two Resource classes for the Models and add BelongsToMany field.

[davidhemphill]

I believe this issue should be fixed in a recent release. Please post a new issue if the issue persists.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.