Currency input "input is not defined"

jcerdan commented 2 years ago

Hi, I'm using Currency Input and getting a bug with it. This is my code:

`

` Both inputs are connected to item.price <x.inputs-currency> shows 'undefined' and works fine.

Not a big problem but this should work isn't it? I have updated all dependencies to the last ones:

laravel/framework v8.79.0 livewire/livewire v2.9.0 wireui/wireui v0.15.0

"alpinejs": "^3.8",

PH7-Jack commented 2 years ago

Can you give me more information? a screenshot of the bug... @jcerdan

jcerdan commented 2 years ago

Sure,

Captura de pantalla -2022-01-14 13-06-13

You can see the input.currency above and the input below. In JS Console there's a warning and an error:

Captura de pantalla -2022-01-14 13-08-52

jcerdan commented 2 years ago

Hi,

I paste again the code as I have just seen it's not visible in my first post, sorry.

<x-inputs.currency icon="currency-euro" wire:model="item.price" label="Preu" thousands=" " decimal="." />
<x-input icon="currency-euro" wire:model="item.price" label="Preu" />

PH7-Jack commented 2 years ago

Are you importing the wireui scripts before the alpine script?

jcerdan commented 2 years ago

Yes, this is the blade layout:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        @hasSection('title')
            <title>@yield('title') - {{ config('app.name') }}</title>
        @else
            <title>{{ config('app.name') }}</title>
        @endif

        <!-- Favicon -->
        <link rel="shortcut icon" href="{{ url(asset('favicon.ico')) }}">

        <!-- Styles -->
        <link rel="stylesheet" href="{{ url(mix('css/app.css')) }}">

        <wireui:scripts />

        <!-- Scripts -->
        <script src="{{ url(mix('js/app.js')) }}" defer></script>

        @stack('styles')
        @livewireStyles

        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">
    </head>

    <body>
        <div class="lg:flex flex-col lg:flex-row lg:min-h-screen w-full">
            @include('layouts.navigation')

            <x-dialog blur />
            <x-notifications />

            @isset($slot)
                {{ $slot }}
            @endisset
        </div>

        @if (app()->isLocal())
            <script src="http://localhost:3000/browser-sync/browser-sync-client.js"></script>
        @endif

        @stack('scripts')
        @livewireScripts
        <script src="https://cdn.jsdelivr.net/gh/livewire/sortable@v0.x.x/dist/livewire-sortable.js"></script>
    </body>
</html>

jcerdan commented 2 years ago

and app.js is

import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();

REJack commented 2 years ago

I would guess you need to place <wireui:scripts /> after <script src="{{ url(mix('js/app.js')) }}" defer></script>. WireUI needs AlpineJS, so AlpineJS is required to be loaded before.

jcerdan commented 2 years ago

Hi @REJack

In the documentation it's indicated in the install section: "Add the WireUI tag above Alpinejs script tag in your page layout:"

if I put after Alipinejs script all other <x-????> fail.

I use <x-select> <x-checkbox> <x-button> etc... with no problems. Only <x-input.currency> gives this problem. The workaround is to use <x-input> and don't use formatting in currency fields.

REJack commented 2 years ago

oh ok, I will check if I can reproduce it 😄

jcerdan commented 2 years ago

Thanks @REJack I have tested several configs and orders... nothing works and I get allways the "undefined". :-(

REJack commented 2 years ago

I got it working without any problem, did you updated from an older version to v0.15? May you have an old resource file or wireui script file.

jcerdan commented 2 years ago

Hi @REJack , I have just tested with a new project. The doc works but it lacks defer in the alpinejs script. I don't really know what happens then in my project. Everything is the same... I will try to find the solution and post it here. Thanks!

jcerdan commented 2 years ago

ok, I found the issue. My field price is within an object (array in livewire) item. When mounting Livewire component, item is not defined, as it's imported from DB when creating the modal. (Typical admin with editing rows in modals). If this is the case, <inputs.currency> gives the error described above. I suppose, it parses something at mount. Other Form Components work fine.

The workaround is to create mount() function in the component and define there the param item.price=0;

    public function mount()
    {
        $this->item['price'] = 0;
    }

I think this should be indicated in the doc somewhere and add a warning to initialize values at mount.

Best

REJack commented 2 years ago

I will look over the typescript may I can add a check if its not filled/initialized.

jcerdan commented 2 years ago

Great! If it's not possible then just a warning in the documentation is maybe enough, so other programmers can check themselves if their values are initialized. At least for those fileds I have checked: x-inputs.currency and x-datetime-picker

PH7-Jack commented 1 year ago

@REJack Sorry for the long time to look into this issue, your bug still persist?

PH7-Jack commented 1 year ago

Maybe it can help you https://github.com/wireui/docs/blob/main/resources/js/alpine.js#L7

PH7-Jack commented 1 year ago

Old issue, try using the latest version of alpinejs, livewire, and wireui. If you're still getting errors, tag me to re-open

ingangelbaeza commented 1 year ago

@PH7-Jack I use the latest versions of alpinejs, livewire, and wireui and the error persists.

PH7-Jack commented 1 year ago

@ingangelbaeza Could you create a new issue and add details?

wireui / wireui

Currency input "input is not defined" #173