jeroennoten / Laravel-AdminLTE

Easy AdminLTE integration with Laravel
MIT License
3.82k stars 1.08k forks source link

[BUG] Input Color component live updating #1276

Closed rjpmestre closed 5 months ago

rjpmestre commented 5 months ago

Describe the bug

Picking a color on input color component doesnt update the binded livewire component.

Steps To Reproduce

Steps to reproduce the behavior:

  1. Enable livewire on adminlte.php
  2. Create a component with a bgColor
  3. Use it on a view having:
    <input wire:model.live="bgColor">
    <x-adminlte-input-color name="icBasic" wire:model.live="bgColor"/>
  4. Click on the generated input field (palette pops up)
  5. Click on any point of the palette other (than the current color)

Expected behavior

Picking a color from the palette should update the property value. I'd expect to see a livewire event being triggered and both input fields having same value.

Screenshots

N/A

Environment

N/A

Item Version
Laravel 3.11

Additional context

Submitted a suggestion / partial solution at this PR

dfsmania commented 5 months ago

@rjpmestre Please share your Livewire component class and view too. So I can test it locally. I think the PR you created is to solve a very particular situation that can be solved by just adding that custom code somewhere in your Livewire component.

Note this package wasn't created initially to fully work with Livewire, its just an extra tool on Laravel and we just added a configuration to include it easily.

rjpmestre commented 5 months ago

The base example that represent this would be having a./app/Livewire/Inputcolortest.php:

<?php

namespace App\Livewire;

use Livewire\Component;

class Inputcolortest extends Component
{
    public $bgColor = '#ffffff';

    public function render()
    {
        return view('livewire.inputcolortest');
    }
}

and a ./resources/views/livewire/inputcolortest.blade.php :

<div>
    <input wire:model.live="bgColor">
    <x-adminlte-input-color name="icBasic" wire:model.live="bgColor"/>
</div>

Changing either the input fields should update the other. I ended up adding it just for future reference. Probably someone had the same sort of workaround going on as the one i had on the PR.

But i guess you're right. I've been using your package for a while. It eases so many things and integrates so well I didnt even realize integrating Livewire wasn't a goal. Having this said, I can only be thankfull for your work and dedication mantaining this project.

dfsmania commented 5 months ago

@rjpmestre I appreciate your thanks, in this case, instead of adding the code in the base component, you might add your workaround in the same Livewire component, for example:

resources/views/livewire/inputcolortest.blade.php

<div>
    <input class="mb-3" wire:model.live="bgColor">
    <x-adminlte-input-color name="icBasic" wire:model.live="bgColor"/>
</div>

@push('js')
<script>

    $(() => {
        $('#icBasic').on('colorpickerChange', function(e) {
            this.dispatchEvent(new Event('input'));
        });
    })

</script>
@endpush