search

livewire / flux

The official Livewire UI component library
https://fluxui.dev
476 stars 42 forks source link

Switch not reflecting property state #506

Closed sanderdewijs closed 3 weeks ago

sanderdewijs commented 3 weeks ago

I've updated to Flux 1.0.17 and noticed that the Switch is always off. It does respond to mouse clicks, and save the value if I change it. However it always has the 'off' state by default, even if the value of the property is true. The issue first came up after release 1.0.14 and it is still the case in the latest release.

When typing out this report I also found the cause of the issue. My previous property definition was:

class EventEdit extends Component {
  #[Validate(['required', 'bool'])]
    public $featured;
}

After adding the bool type to the property the switch worked as expected.

class EventEdit extends Component {
  #[Validate(['required', 'bool'])]
    public bool $featured;
}

Not sure if this is the intended way to define a property for a Switch component. If so it might be a good idea to add this in the docs.

jeffchown commented 3 weeks ago

@sanderdewijs I tried both versions of your code, but they both worked for me as expected.

Did you php artisan view:clear, npm run build (or dev) and delete/republish any previously published Flux components after upgrading to 1.0.17?

joshhanley commented 3 weeks ago

So I just tested this on v1.0.17 and can't get them working. The initial true states aren't working for either untyped or typed properties, and clicking the switches doesn't update either (but networks requests are being sent).

new class extends Component {
    public $featured1 = true;
    public bool $featured2 = true;
};

?>

<flux:main>
    <flux:switch wire:model.live="featured1" label="Featured1" />
    Featured 1: {{ $featured1 ? 'Featured' : 'Not featured' }}

    <flux:switch wire:model.live="featured2" label="Featured2" />
    Featured 2: {{ $featured2 ? 'Featured' : 'Not featured' }}
</flux:main>

@jeffchown can you test my component and see what you get?

@sanderdewijs in future please make sure you include complete copy/pasteable code (including the blade view) to make it easier for us to review.

jeffchown commented 3 weeks ago

@joshhanley I just tested your Volt component in my clean Flux test app and it worked fine/as expected on my end.

Initial true states were set properly and clicks toggled each switch's state properly.

(Livewire 3.5.12, Flux 1.0.17)

jeffchown commented 3 weeks ago

@joshhanley I also double-checked/inspected the properties using wire-elements/wire-spy and all was good.

joshhanley commented 3 weeks ago

@jeffchown thanks for testing! Hmm strange. Yeah when I reviewed the network events the switch was firing, no properties were getting updated and yeah the default value wouldn't load. I'm doing it in my Flux test app, but maybe I will make a new one to test it out again.

jeffchown commented 3 weeks ago

@joshhanley Very strange that it's working for me but not you two.

Only extras I have installed are barryvdh/laravel-debugbar, spatie/laravel-ray, wire-elements/wire-spy and calebporzio/sushi

Using Brave browser.

joshhanley commented 3 weeks ago

@jeffchown and @sanderdewijs ok I worked it out. My Flux test app was on an old version of Livewire.

@sanderdewijs can you make sure to update your Livewire version to at least v3.5.12 (latest) and test again. It contains a bump to the latest version of Alpine v3.14.3 which has a fix for switches, etc.

Image

joshhanley commented 3 weeks ago

I'd surprised if you were able to install v1.0.17 without updating Livewire as Flux has a minimum composer requirement of "livewire/livewire": "^3.5.12",. My scenario is a little different as I use Flux and Flux Pro repos locally, so don't generally update it using composer.

sanderdewijs commented 3 weeks ago

I still had my console open and checked the composer update output. Looks like I've updated Livewire to 3.5.12 just before the latest Flux update was released? When I ran composer update yesterday it only upgraded the following packages

I can see the switch working as expected now.

jeffchown commented 3 weeks ago

@sanderdewijs Glad it's finally working :)

So, when you first posted this issue, you were actually running Flux v1.0.14, not v1.0.17, correct?

And, when you updated Livewire to 3.5.12, which contained the needed Alpine update, did you recompile the assets via npm run build (or dev) and run php artisan view:clear?

One way or another, issue solved 👍

sanderdewijs commented 3 weeks ago

Thanks Jeff!

The issue first came up in Flux 1.0.14 and persisted after updating to v1.0.17 initially. But I'm not sure I ran npm run dev and cleared views after upgrading to 1.0.17. Glad the switch is functioning properly again!

jeffchown commented 3 weeks ago

You're welcome, @sanderdewijs !

I've been caught by not clearing my view cache a couple of times after updating Livewire/Flux.

My main process after each update now is: