Select options don't update when using "javascript" select

Hi,

i am not sure if there's a better way, or i am using. wrong method, but here's what's happening.

let's say i have an options array that is [1,2]. and it's passed to Select component ( array passed by value ).

now if i update the options array in another component, let's say when i check a checkbox, i want to add the number 3 (the array is passed by reference)

and i call the select component and pass the new array to it. it won't update if i used a js select ( when using a native(false) , multiple , searchable etc) but if i use it as normal html select, the values are updated.

here's an example of what i mean

The following example is working but i can't use multiple , searchable etc.

Toggle Component

$test=[1,2]
Forms\Components\Toggle::make('variations')
      ->label("choose other variations to include")
      ->inline(false)
      ->reactive()
      ->afterStateUpdated(function ($component) use (&$test) {
          $test[3] = 3;
          $component->getContainer()
              ->getComponent('variation_options')
              ->options($test);
      }),

$test=[1,2]
Forms\Components\Toggle::make('variations')
      ->label("choose other variations to include")
      ->inline(false)
      ->reactive()
      ->afterStateUpdated(function ($component) use (&$test) {
          $test[3] = 3;
          $component->getContainer()
              ->getComponent('variation_options')
              ->options($test);
      }),

Select Component

 Select::make('variation_options')
                ->key('variation_options')
                ->options($test)

 Select::make('variation_options')
                ->key('variation_options')
                ->options($test)

BUT i can make it work by doing the following

$test=[1,2]
Forms\Components\Toggle::make('variations')
      ->label("choose other variations to include")
      ->inline(false)
      ->reactive()
      ->afterStateUpdated(function ($component) use (&$test) {
          $test[3] = 3;
          $component->getContainer()
              ->getComponent('variation_options')
              ->options($test)

              ->multiple()
              ->native(false);
      }),

$test=[1,2]
Forms\Components\Toggle::make('variations')
      ->label("choose other variations to include")
      ->inline(false)
      ->reactive()
      ->afterStateUpdated(function ($component) use (&$test) {
          $test[3] = 3;
          $component->getContainer()
              ->getComponent('variation_options')
              ->options($test)

              ->multiple()
              ->native(false);
      }),

As long as i initialize the select component as HTML input not a js select.

so is is there a better way to do that, as i thought this might be a bug where the component should render the new value passed

thanks in advance

Select options don't update when using "javascript" select

$test=[1,2]
Forms\Components\Toggle::make('variations')
      ->label("choose other variations to include")
      ->inline(false)
      ->reactive()
      ->afterStateUpdated(function ($component) use (&$test) {
          $test[3] = 3;
          $component->getContainer()
              ->getComponent('variation_options')
              ->options($test);
      }),

$test=[1,2]
Forms\Components\Toggle::make('variations')
      ->label("choose other variations to include")
      ->inline(false)
      ->reactive()
      ->afterStateUpdated(function ($component) use (&$test) {
          $test[3] = 3;
          $component->getContainer()
              ->getComponent('variation_options')
              ->options($test);
      }),

Select Component

 Select::make('variation_options')
                ->key('variation_options')
                ->options($test)

 Select::make('variation_options')
                ->key('variation_options')
                ->options($test)

BUT i can make it work by doing the following

$test=[1,2]
Forms\Components\Toggle::make('variations')
      ->label("choose other variations to include")
      ->inline(false)
      ->reactive()
      ->afterStateUpdated(function ($component) use (&$test) {
          $test[3] = 3;
          $component->getContainer()
              ->getComponent('variation_options')
              ->options($test)

              ->multiple()
              ->native(false);
      }),

$test=[1,2]
Forms\Components\Toggle::make('variations')
      ->label("choose other variations to include")
      ->inline(false)
      ->reactive()
      ->afterStateUpdated(function ($component) use (&$test) {
          $test[3] = 3;
          $component->getContainer()
              ->getComponent('variation_options')
              ->options($test)

              ->multiple()
              ->native(false);
      }),

Select options don't update when using "javascript" select

Select options don't update when using "javascript" select

Similar Threads

Similar Threads

Similar Threads