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

disabled not added to flux:select variant="listbox" on submit #725

Open
jeffchown opened this issue Nov 23, 2024 · 0 comments
Open

disabled not added to flux:select variant="listbox" on submit #725

jeffchown opened this issue Nov 23, 2024 · 0 comments

Comments

@jeffchown
Copy link

jeffchown commented Nov 23, 2024

When submitting a form, either a readonly or disabled attribute are added to controls (depending upon the control type).
This stops the user from being able to edit the form during submit and allows us to style the controls for visual feedback.

A flux:select variant="listbox" doesn't seem to receive any such attribute upon submit - which means I can't style it, and also it is still active/editable during submit.

If you use the code below and inspect the different controls in the browser's devtools, you'll see the attributes being added (or not, in the case of the listbox) during the sleep(3) I added to the save() method.

To reproduce, add the following to your app.css:

input:read-only,
textarea:read-only,
input:disabled,
textarea:disabled,
select:disabled { @apply !bg-gray-50 dark:!bg-white/[7%] hover:cursor-not-allowed; }

button:disabled, fieldset:disabled button { @apply hover:cursor-not-allowed; }

Then, this Volt component shows a listbox next to a few other controls:

<?php

use Livewire\Volt\Component;

new class extends Component {
    public function save()
    {
        sleep(3);
    }
}; 
?>

<div>
    <form wire:submit="save" class="space-y-2">
        <flux:input label="Flux:input" />

        <flux:select placeholder="Choose industry" label="Native select">
            <flux:option>Photography</flux:option>
            <flux:option>Design services</flux:option>
            <flux:option>Web development</flux:option>
            <flux:option>Accounting</flux:option>
            <flux:option>Legal services</flux:option>
            <flux:option>Consulting</flux:option>
            <flux:option>Other</flux:option>
        </flux:select>

        <flux:select variant="listbox" placeholder="Choose industry" label="Listbox variant">
            <flux:option>Photography</flux:option>
            <flux:option>Design services</flux:option>
            <flux:option>Web development</flux:option>
            <flux:option>Accounting</flux:option>
            <flux:option>Legal services</flux:option>
            <flux:option>Consulting</flux:option>
            <flux:option>Other</flux:option>
        </flux:select>

        <flux:select variant="combobox" placeholder="Choose industry" label="Combobox variant">
            <flux:option>Photography</flux:option>
            <flux:option>Design services</flux:option>
            <flux:option>Web development</flux:option>
            <flux:option>Accounting</flux:option>
            <flux:option>Legal services</flux:option>
            <flux:option>Consulting</flux:option>
            <flux:option>Other</flux:option>
        </flux:select>

        <flux:button type="submit">Save</flux:button>
    </form>
</div>
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

1 participant