Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Checkbox is not interactable #592

Closed
SeraphixMD opened this issue Nov 3, 2024 · 5 comments
Closed

Checkbox is not interactable #592

SeraphixMD opened this issue Nov 3, 2024 · 5 comments

Comments

@SeraphixMD
Copy link

SeraphixMD commented Nov 3, 2024

This used to work just fine, but it stopped a couple days ago. Followed the installation guide, used the login form in the cards example and added a checkbox. Clicking the checkbox doesn't do anything. Tested this in Arc and Firefox.

<x-guest-layout>
    <flux:card class="space-y-6">
        <div>
            <flux:heading size="lg">Log in to your account</flux:heading>
            <flux:subheading>Welcome back!</flux:subheading>
        </div>

        <div class="space-y-6">
            <flux:input label="Email" type="email" placeholder="Your email address"/>

            <flux:field>
                <flux:label class="flex justify-between">
                    Password

                    <flux:link href="#" variant="subtle">Forgot password?</flux:link>
                </flux:label>

                <flux:input type="password" placeholder="Your password"/>

                <flux:error name="password"/>
            </flux:field>
        </div>

        <flux:checkbox label="Remember me"/>

        <div class="space-y-2">
            <flux:button variant="primary" class="w-full">Log in</flux:button>

            <flux:button variant="ghost" class="w-full">Sign up for a new account</flux:button>
        </div>
    </flux:card>
</x-guest-layout>
@ju5t
Copy link

ju5t commented Nov 3, 2024

Clicking the checkbox doesn't do anything.

What doesn't it do what you expect it to do? It not doing anything could in fact be caused by anything either. There are two possible reasons I can think of, but it depends on the exact issue your having.

  1. If the checkbox doesn't get checked, you probably need to rund npm run build.
  2. If you're using this outside Livewire, then this is a duplicate of Custom inputs aren't working with native form submissions #341.

@calebporzio
Copy link
Contributor

The provided snippet works fine on my machine, but because we just tweaked checkboxes in the last release and I want to see if we can get to the bottom of this:

A) Did you run php artisan view:clear after upgrading?
B) Have you published any of the components to your local project's resources/views/flux directory? If so please share what is published in there

Thanks for the report.

@SeraphixMD
Copy link
Author

SeraphixMD commented Nov 3, 2024

Clicking the checkbox doesn't do anything.

What doesn't it do what you expect it to do? It not doing anything could in fact be caused by anything either. There are two possible reasons I can think of, but it depends on the exact issue your having.

  1. If the checkbox doesn't get checked, you probably need to rund npm run build.
  2. If you're using this outside Livewire, then this is a duplicate of Custom inputs aren't working with native form submissions #341.

The title is meant in the most literal sense. Clicking the checkbox doesn't check the checkbox.

  1. That is happening.
  2. Yes, I'm using this outside of a Livewire component, but that's not the issue here. I'm aware of the situation that issue describes and have been using a similar workaround for weeks.

The provided snippet works fine on my machine, but because we just tweaked checkboxes in the last release and I want to see if we can get to the bottom of this:

A) Did you run php artisan view:clear after upgrading? B) Have you published any of the components to your local project's resources/views/flux directory? If so please share what is published in there

Thanks for the report.

A. Running php artisan view:clear This doesn't fix this.
B. I have not published any components.

Furthermore, I tried adding the checked attribute to the checkbox in the browser, to no avail. I couldn't spot anything out of the ordinary in the DOM. In case you'd like to dig as well, I've published that form here: https://mmt.seraphix.dev/login . Given that that snippet works fine for you, my best guess would be that I messed up configuring the project somehow, but considering that I've created a brand new project in Herd, added Flux and started converting the Jetstream components to use Flux for the past couple days, and this exact scenario has worked before, I'm not quite sure what to look for. Other areas of the project also Using Flux work just fine, modals, buttons etc. It's just checkboxes that can't be ticked. If you'd like, I could create a brand new project, add Flux, and simply add that a checkbox on an empty page and see what happens.

@jeffchown
Copy link

@SeraphixMD Can you share your guest layout file as well?

@SeraphixMD
Copy link
Author

Well, when I went to copy my guest layout file, I noticed I didn't include @fluxScripts and @fluxStyles :sigh: Setting up new projects at 2 AM apparently isn't the greatest of ideas, sorry for the noise.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants