multi select with dynamic values hang in infinite loop when check value in edit mode

[joeyramone76]

Description

In edit mode, when I try to check a value of a multi select with dynamic values, the application is not responding anymore because Vue component hang in infinite loop

Steps to reproduce

• Create a new Laravel project
• install and configure twill 2.8.2
• follow this documentation link to create a multi select with dynamic values
• follow this twill guide to add multi select in create modal
• add new item and select one or more value from multi select during item creation
• save the item
• from the index list select the new created item
• from the edit view try to check new value from multi select

Expected result

The checkbox change to checked

Actual result

The checkbox remain unchecked and the application is not responding anymore (hang in infinite loop and chrome ask to terminate the tab)

To discover the error I build Vue component in DEV mode following this twill guide

With dev mode enabled when I try to check a value from multi select the console show this error

vue.esm.js?a026:628 [Vue warn]: You may have an infinite update loop in watcher with expression "storedValue"

found in

---> <A17Multiselect> at frontend/js/components/MultiSelect.vue
       <A17Fieldset> at frontend/js/components/Fieldset.vue
         <Root>

The problem seems to be in the checkboxes,js code at set method that is called in infinite loop

set: function (value) {
        if (!isEqual(value, this.currentValue)) {
          this.currentValue = value
          if (typeof this.saveIntoStore !== 'undefined') this.saveIntoStore(value)
          this.$emit('change', value)
        }
      }

Versions

Twill Version 2.8.2

Laravel version 7.3 & Laravel version 8.83.12

PHP version 7.4

Database MySQL

Tested in Google Chrome and Firefox

[haringsrob]

Hey @joeyramone76 ,

I tried to reproduce this but without success.

Can you make sure that/run php artisan twill:update and then clear the browser cache just to be sure.

[joeyramone76]

Hi @haringsrob , thanks for the reply. I had already tried and did it again now but with no luck.

[joeyramone76]

if you find it useful I am attaching part of the code

views/admin/foodItems/form.blade.php

@extends('twill::layouts.form')

@section('contentFields')
    @formField('multi_select', [
        'name' => 'foodCategories',
        'label' => 'Categorie',
        'options' => $foodCategories,
        'min' => 1,
        'max' => 5
    ])

    @formField('wysiwyg', [
        'name' => 'description',
        'label' => 'Descrizione',
        'toolbarOptions' => [ [ 'header' => [1, 2, false] ], 'list-ordered', 'list-unordered', [ 'indent' => '-1'], [ 'indent' => '+1' ] ],
        'placeholder' => 'Descrizione della categoria',
        'editSource' => false,
    ])

    @formField('tags', [
        'label' => 'Proprietà',
    ])
@stop

The associated controller

class FoodItemController extends BaseModuleController
{
    protected $moduleName = 'foodItems';

    protected $indexColumns = [
        'title' => [
            'title' => 'Nome',
            'field' => 'title',
        ],
        'foodCategory' => [ // relation column
            'title' => 'Categorie',
            'sort' => true,
            'relationship' => 'foodCategories',
            'field' => 'title'
        ],

    ];

    protected function formData($request)
    {
        return [
            'foodCategories' => app()->make(FoodCategoryRepository::class)->listAll()
        ];
    }

    protected function indexData($request) {
        return [
            'foodCategories' => app()->make(FoodCategoryRepository::class)->listAll()
        ];
    }
}

[ifox]

Please feel free to reopen an issue if you are still seeing this, but we haven't been able to reproduce.

[somnath-dev-dapl]

Not selected on edit mode