Describe the bug Short: I have an array of tasks, just a 2d array with text in keys, that livewire is loosing state on.

Longer: This is a volunteer school board project that I'm going VERY YANGI on, in the hopes it takes just a few days of spare time. We have a bunch of shared tasks, that I'm putting online for the right people to see.

I made a simple checklist component and added it to the site, I haven't even put items in a DB at this point, (perhaps that could help, but I decided to go all the way for the YAGNI)

Here is the component model, I"m just putting the whole thing in as is so it's easy to test:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Checklist extends Component
{
    public $flash = '';
    public $question = '';
    public $tasks = [
        'setup_the_system'=>[
            'title_note' => 'Most of this section is stuff that you won\'t readily be able to see,
            for example programming this checklist and the ability to ask questions here. However,
            it\'s all very helpful in moving this forward in the easiest way possible to solve problems
            in the easiest ways we can think of.',
            'create_visual_checklist_format' => 1,
            'create_version_repository'=>1,
            'create_version_repository_note'=> 'This basically will show all versions of the project, it\'s a <em>DR</em>
            (Disaster recovery) mechanism, in case I kick the bucket, another person can take over with a list of everything
            that\'s ever been done and things that need to get done in order to move forward. I will also endeavour to
            find someone to take over for me in case that should occur.',
            'kick_bucket_replacement_volunteer_found' => 0,
            'put_up_temporary_site'=>1,
            'put_up_temporary_site_note'=>'you are on it, the data on here will constantly be destroyed and re-written
            as we get ready to make something real! As real as this feels, don\'t save anything here that is important.
            Instead email me or keep a word doc, or basically anything else other than saving real data here.',
        ],
        'PAC USE CASES (A CHECK MEANS IT\'S AGREED UPON)' => [
            'Gatekeeper authorizes guardians who register'=>1,
            'Gatekeeper authorizes guardians who register_note'=> 'The <b>"Gatekeeper"</b> is a PAC member who has access
             to information and knows which families are attending the school and which ones are not.<br><br>
             Anyone who registers need to go through a 2 step process to have access to <b><em>any</em></b> information.
             Step 1 is simply verifying their email address which they can do without any intervention from the gatekeeper.
             Step 2 requires a person to actually allow the verified guardian access to see our internal information.
             Step 2 will also need to be re-done every year.',
            'Gatekeeper is notified each time someone registers'=>1,
            'Gatekeeper is notified each time a child is registered'=>1,
            'Gatekeeper confirms child details including homeroom'=>1,
            'Gatekeeper confirms child details including homeroom_note'=> '
            This seems overwhelming for 1 person, it could even be 2 people sitting together on skype or in an office
            calling out names, it should take more than an evening or 2.
            ',

            'pac members / room reps can send notifications to their classes'=>0,
            'pac members / room reps can send notifications to their classes_note'=>'
            This is an idea, notice the unchecked box, and opinions are welcome. <br><br>
            Instead of a cumbersome trickle down human information system PAC emails me, I email my room constituents,
            perhaps school wide updates like the PAC meeting details can just be summarized and sent to the people who
            want notification. Either everyone if it\'s deemed important or, people who subscribed to news in some fashion.<br><br>
            When there are room specific issues, we could then pass those on directly as room reps.
            ',
        ],

        'GUARDIAN USE CASES (A CHECK MEANS IT\'S AGREED UPON)' => [
            'Guardian can register their children'=>1,
            'Guardian can add other guardians to their family' => 1,
            'Guardian can add other guardians to their family_note' => '
            Guardians who are added get a notification email to register',
            'Should invited guardians need to be confirmed by gatekeeper?'=>0,
            'Should invited guardians need to be confirmed by gatekeeper?_note'=>'
            For example, I go through registration and get confirmed. I then add another guardian Jane, and
            Jane gets an email to register. Jane registers and gets verified via email.<br><br>
            Does she need to get confirmed too?',
            'Guardians add children'=>1,
        ]
    ];
    
    public function render()
    {
        return view('livewire.checklist');
    }
    
    
    public function askMe()
    {
        $this->flash = $this->question;
        $this->question = '';
    }
}

<div class="">
    @if(!empty($flash))
        <div class="p-12 bg-blue-100">{{$flash}}</div>
    @endif

    <div class="flex flex-col md:flex-row">
        <div class="w-full md:w-1/2">
            @foreach($tasks as $title => $group)
                <div
                    class="font-semibold mt-4 tracking-wide text-sm uppercase text-gray-600">{{ str_replace('_',' ',$title) }}</div>
                @foreach($group as $key=>$value)
                    @if(is_array($value))
                        <div
                            class="font-semibold mt-4 ml-8 tracking-wide text-sm uppercase text-gray-600">{{ str_replace('_',' ',$key) }}</div>
                        @foreach($value as $childKey=>$childValue)
                            @if(Str::endsWith($childKey,'_note'))
                                <div
                                    class="mt-1 ml-12 pl-3 tracking-wide text-sm text-gray-600">{!! $childValue !!}</div>
                            @else
                                <label class="ml-8 flex items-center mt-2">
                                    <input type="checkbox"
                                           wire:model.lazy="tasks.{{ $title }}.{{ $key }}.{{ $childKey }}"
                                           class="form-checkbox" @selected($tasks[$title][$key][$childKey],1)>
                                    <span class="ml-2">{{ str_replace('_',' ',$childKey) }}</span>
                                </label>
                            @endif
                        @endforeach
                    @else
                        @if(Str::endsWith($key,'_note'))
                            <div
                                class="mt-1 {{ ($key != 'title_note'? 'ml-4 pl-3': '') }} tracking-wide text-sm text-gray-600">{!! $value !!}</div>
                        @else
                            <label class="flex items-center mt-2">
                                <input type="checkbox" wire:model.lazy="tasks.{{ $title }}.{{ $key }}"
                                       class="form-checkbox" @selected($tasks[$title][$key],1)>
                                <span class="ml-2">{{ str_replace('_',' ',$key) }}</span>
                            </label>
                        @endif
                    @endif
                @endforeach
            @endforeach


        </div>
        <div class="w-full md:w-1/2 mt-4">
            <div class="md:fixed md:w-5/12">
                <div class="flex flex-col w-full md:ml-12">
                    <div class="font-semibold tracking-wide text-sm uppercase text-gray-600">Questions / Concerns</div>

                    <label class="block mt-2 w-full mx-auto">
                        <div class="form-label">I'd like to know ... @error('question')<br>{{ $message }}@enderror</div>
                        <textarea wire:model.lazy="question" name="question" id="question" autocomplete=""
                                  autocapitalize="off"
                                  rows="15"
                                  class="form-input block w-full @error('question') error @enderror"
                                  placeholder="how can I help you?">{{ $question }}</textarea>
                    </label>

                    <button wire:click.prevent="askMe" class="btn brand w-full mt-6">Ask Me Stuff!</button>
                </div>
            </div>
        </div>
    </div>
</div>

It produces something like this:

To Reproduce Steps to reproduce the behavior:

1. Make a livewire enabled project
2. Add the checklist component
3. Add any input to the Ask Me a Question Field
4. Click the button

Expected behavior The flash public item will get the data from the text area

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information): Macos Catalina Brave browser, same thing happens in google chrome.

Additional context When I shrink the array down it will work or fail at some random size.

There is no way here to "key" this up without a re-implementation maybe numeric keys or task objects. But it feels unnecessary for something so small and simple.

I updated livewire from 0.7.4 to 1.0.1 and after updating I get this error in the console.

index.js:19 Uncaught TypeError: Cannot read property 'data' of null
    at new Component (index.js:19)
    at index.js:69
    at Array.forEach (<anonymous>)
    at Livewire.start (index.js:67)
    at HTMLDocument.<anonymous> (dashboard:38)

The attribute is in the rendered HTML but when the component is parsed by livewire, it is not found.

Update:-

I dug into the issue a little bit morning. Here are the steps to reproduce the issue. I assume that you have a fresh installation of Laravel with livewire and Turbolinks installed and configured.

1. Create two separate livewire components.
2. Include those two livewire components in two separate pages.
3. Now add links into your layout to navigate between the two pages.
4. Now navigate to any one of the pages and then quickly navigate to another page while the previous page request is still pending.

We get error 419 if the page is inactive for a while.

Describe the solution you'd like I see that you have disabled session expiration before and re-enabled it, which was a good move. But can we create an api where we can handle this situation more gracefully? Maybe we decide to reload the page, or show a beautiful error, or something else.

It's likely to be a simple thing but I can't manage to solve it on my own smh.

On my local env it's working fine just doing this:

...
    @livewireAssets
</body>

This of course load the file properly as it should. Now, after I deployed the site (using Forge) it didn't load the file at all with the relative path. My network tab (Chrome) says:

Failed to load resource: the server responded with a status of 404 (Not Found) (index):14 Uncaught ReferenceError: Livewire is not defined at (index):14

I though it might be the directory/file that isn't accesible but when I hit that path adding the IP at the beginning it loads the js file just fine (http://165.227.80.80/livewire/livewire.js?)id=8456629107e9ab1c518f)

So, then checking the docs I saw that you can customized the base_url initializing the directive with a custom url, so I tried that also:

    @livewireAssets(['base_url' => ENV('APP_URL'));

But even with the full path the file isn't loading:

This is the link to the site.

Has anyone faced this problem before?

Fille uploads doesn't work over https, whereas it works perfectly over http

Set up livewire file upload, then use https (e.g. with ngrok) the upload fails with the request to

Request URL: https://XYZ.ngrok.io/livewire/upload-file?expires=1593877850&signature=0c0b334969966e642854a730fdb78accd3c7332648291fc2449530f15cea7035 Request Method: POST Status Code: 401 Unauthorized

Following the flow with the debugger the problem arises, in the vendor/livewire/livewire/src/Controllers/FileUploadHandler.php, in the handle method.

In particular in the

abort_unless(request()->hasValidSignature(), 401); line.

Commenting it out works around the problem (the uploads works) but of course is not optimal,

Context

• Livewire version: 1.3.0
• Laravel version: 7.10.0
• Browser: [Firefox, Vivaldi]

Describe the bug: A select element with a pre selected value does not render correctly for the user

To Reproduce

1. Create a blade template with a select element
2. Pass a value from livewire to the blade template
3. Use standard blade syntax to set the pre-selected value

Expected result: If the second option in the select element is selected then this should be visible to the user when the dom renders.

Actual result: Always the first option in the select element is visible to the user even though another option has the correct html selected tag.

Blade Input:

<select id="role_id" wire:model="role_id">
    <option value="1" {{ $role_id == 1 ? 'selected="selected"' : '' }}>Owner</option>
    <option value="2" {{ $role_id == 2 ? 'selected="selected"' : '' }}>Collaborator</option>
</select>

HTML Output

<select id="role_id" wire:model="role_id">
    <option value="1">Owner</option> 
    <option value="2" selected="selected">Collaborator</option>
</select>

Screenshots

Desktop (please complete the following information):

• Browser: chrome

This PR adds dynamic Livewire component support to new component syntax.

This will now be possible (the same syntax as blade dynamic components https://laravel.com/docs/8.x/blade#dynamic-components):

<livewire:dynamic-component component="counter" />

It also supports component attribute as an evaluated expression:

<livewire:dynamic-component :component="'counter-'.$loop->index" />

There were no tests for the Livewire tag compiler, so I have added them and added tests for dynamic component tag compilation.

Hope this helps!

Description

After upgrading from 2.3.8 to 2.3.11, all livewire component getting 404 response

Context

• Livewire version: [e.g. 2.3.11]
• Laravel version: [e.g. 7.30.4]

This applies to a page re-render only, after some logic is performed. For example:

<button wire:click="setModelToTrue()">click</button>

@if($model->itIsTrue())
<div x-data="{ open: false }">
  <button @click="open = true">Show More...</button>
  <ul x-show="open" @click.away="open = false">
    <li>
      <button wire:click="archive">Archive</button>
    </li>
    <li>
      <button wire:click="delete">Delete</button>
    </li>
  </ul>
</div>
@endif

On a page load/full refresh with "itIsTrue()" all works as expected.

However, If we click the button to turn "it to true" dynamically, the re-render results in the alpine component not being initialized and the dropdown does not work.

I have tried livewire keys, element ID's, extra div elements (as in the troubleshooting section) but I just can't get anything working.

Describe the bug Input with wire:model lose focus after the first request was sent

Expected behavior Input should focus until I blur or click away

GIFs

Additional context This issue however, solved if I place the input one level after the root <div>

<div>
    <h1 class="mb-8 font-bold text-3xl">Users</h1>

    <input wire:model="search" type="text"
        class="py-2 px-4 w-64 rounded shadow focus:shadow-outline focus:outline-none" placeholder="Search.."
        autocomplete="off">
</div>

Worked!

<div>
    <h1 class="mb-8 font-bold text-3xl">Users</h1>

    <div class="mb-6 flex justify-between items-center">
        <div class="flex items-center">
            <input wire:model="search" type="text"
                class="py-2 px-4 w-64 rounded shadow focus:shadow-outline focus:outline-none" placeholder="Search.."
                autocomplete="off">
        </div>
    </div>
</div>

Not worked :thinking:

Any help would be appreciated. Thanks.

Describe the bug Livewire seems to convert bound data (collections, objects, Eloquent instances) into arrays after a render.

To Reproduce

1. Create a livewire component and add a property public $user;.
2. On mount: fetch a user and optionally log its class.
3. Add an action that, when a button gets clicked, tries to fetch a related model via $this->user->relatedModel.

Expected behavior An instance of the related model is fetched.

Actual behavior An exception is thrown: Call to a member function relatedModel() on array.

Screenshots

Bumps json5 from 2.2.0 to 2.2.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Fixes #5462, #5467, #5471, #5466, #5470, #5464 and comments on PR #4570.

The original bug

This issue originally started when the persistant middleware feature was added to Livewire.

When this was added, Livewire support for locale prefixes broke, as it was trying to match routes based on the / root path. But localised applications may have a prefix like /en in the path.

A 404 is triggered when the route cannot be matched.

This was fixed in v2.3.14, by first trying to match the root route, and if that doesn't work then it gets the locale from the fingerprint, removes it from the path and tries again.

The bug that was recently fixed

But it still didn't completely fix the issue, due to a bug with the Str::replaceFirst() parameter order, causing it to always return a URL of an empty string "" which is essentially the root URL.

If the root route has authentication on it, and the user isn't logged in, it actually triggers a redirect to the login page, causing Livewire to break completely, as the response is the HTML for the login page.

If there is no authentication though, there are other instances where a NotFoundHttpException can occur (such as if there is no root route), triggering the 404 modal.

You can see an example of this bug in the below screenshot (see ReplaceFirst with bug output).

It takes the current url http://livewire-httpconnectionhandler-demo.test/en/welcome and returns an empty URL.

A fix was recently merged for this in PR #4570 that swapped the order of the parameters in Str::replaceFirst() and the result is shown above (see ReplaceFirst with fix), where the URL correctly has the locale removed.

The above fix works great for anyone using packages like mcamara/laravel-localization so that localisation is handled correctly.

The latest bugs

The fix which corrected the parameter order of Str::ReplaceFirst has uncovered two new bugs, one of which is when running a Laravel/Livewire app in a sub directory, and the other is when using localisation on the root route.

Localisation on the root route

For an app that uses localisation on the root route, it would have a URL like http://livewire-httpconnectionhandler-demo.test/en. This URL currently triggers a 404 with the fix from PR#4570 due to it trying to match the locale and then a forward slash.

This can be fixed by ensuring the forward slash is before the locale instead of after, as noted here.

Hosting in a subdirectory

In the scenario where a Laravel/Livewire application is hosted in a subdirectory, currently the latest release of Livewire (v2.10.8) breaks all Livewire components when a subsequent request is triggered.

First question is, why are people hosting them in subdirectories? As it turns out, there are quite a lot of people who still use Apache, and only have a single web root folder configured on their local machines. Therefore then run all they're apps out of subdirectories. So this issue is mainly impacting their local development environment. But when the deploy their app to a proper domain, it is fine.

So what is happening is, if running an application using a URL such as http://localhost/myapp/mycomponent, any subsequent Livewire requests return a 404, as the route that is trying to be matched is /myapp/mycomponent instead of the path relative to the project of /mycomponent.

Now as to why this bug has started happening.

The reason for this is, now that the Str::replaceFirst() is actually returning a full URL (instead of an empty string), Livewire is making use of this URL to match it against any available routes to try and find the original route (for the persistent middleware feature).

To determine the original route and its assigned middleware, Livewire generates a fake request using the URL and method provided. This request is then used to match against routes in Laravel's router.

But the faked request that gets generated isn't aware of the projects true base path being inside a subdirectory in the main web root folder, as such believes it's base path is the web root folder, causing to try and match the full URI (/myapp/mycomponent) as explained above.

To fix this, we can make use of the real request to Livewire's endpoint to determine the projects actual path and pass these details into the faked request, allowing it to run the match correctly.

Conclusion

This PR fixes both of the above issues. I have tested it locally using a repo that has localisation and another repo being hosted in a subdirectory, ensuring that the bugs do actually occur and that applying this PR fixes them.

I've also made sure persistent middleware still all works as expected.

These issues are related but also distinct, so if required, I can split into two PRs, but felt it was easier just to give all the context in one PR.

I have no idea how to test this, as such haven't added tests to this PR.

Hope this helps!

The Problem: In some cases, the change listener for x-model is duplicated when x-model is within a blade @if. This causes incorrect values to be bound when checkboxes are bound to an array on the Alpine side of things.

I would expect the checkbox here to bind 1 to the checks array only once, but it actually is bound twice!

Discovered this while using Livewire v2 and Alpine v3. Didn't make a discussion... the failing test seemed more useful to post as a PR instead. Tried to figure out what was happening on the Alpine side, but haven't been successful thus far. It maxes out at two x-model listeners. Something to do with cloning the Alpine component and the original x-model event listener not being removed.

See this line: https://github.com/livewire/livewire/pull/5454/files#diff-c9834c12ea72083bd51b7800e43124ccc188229415d4c7a3e30770d4e66a6d65R21

If the checkbox is within the @if statement, the problem appears. When Livewire "Alpinifies" the element, it seems to clone and never remove the original event listener.

Since backed enums can be used as a type since commit 8dd340ea07da5c5eb33afa3fce258046b4a6938a, is good to have it mentioned on PublicPropertyTypeNotAllowedException.

I was misled thinking that enums were not supported since I didn't see enums on the list provided in the exception message, but the problem was just that my enums were not backed.

Review the contribution guide first at: https://laravel-livewire.com/docs/2.x/contribution-guide

1️⃣ Is this something that is wanted/needed? Did you create a discussion about it first? https://github.com/livewire/livewire/discussions/5310 2️⃣ Did you create a branch for your fix/feature? (Master branch PR's will be closed) yes 3️⃣ Does it contain multiple, unrelated changes? Please separate the PRs out. no 4️⃣ Does it include tests? (Required) no 5️⃣ Please include a thorough description (including small code snippets if possible) of the improvement and reasons why it's useful.

The current awesome livewire repository was updated more than 2 years ago and there are 9 pending PR. I asked for permission from the owner of the repo in twitter DM but he didn't answered my DM after months. and I think livewire deserves a much updated and better awesome list.

I've merged all Pending PR's into my repo and added bunch of other libraries that built with livewire.

Thanks for contributing! 🙌