Input field should be clearable even when disabled

[Pilskalns]

Flux version

v1.0.29

Livewire version

v3.5.15

What is the problem?

It should be possible to set the input as clearable even when it is disabled.

A recent update (discussed in #627) introduced a feature, where the disabled field would hide the clearable icon.
But there are still use cases where one would want input that is not editable yet clearable with the X mark. This enables i.e. to display a search box only when input is empty.

Code snippets

<flux:input disabled clearable wire:model.live="display" />

How do you expect it to work?

While I see the point in #627, I think, it should work in a way that:

• When clearable is not set (null), it auto-hides the clearable element based on the disabled state
• When clearable is explicitly set (true or false) then it follows that no matter what is disabled state

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[ju5t]

For me the disabled state should disable all functionality of an element. Although semantically the clearable button is outside the element, it's positioned inside the select which makes it a descendant control in my opinion. And this means it should be disabled too.

This Boolean disabled attribute indicates that the user cannot interact with the control or its descendant controls.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled#overview

Strictly speaking a disabled field shouldn't even be part of the payload in Livewire as disabled fields are not part of a standard POST-request either. Arguably readonly would be a better attribute but it's not meant to be used with select.

However, I think we can find a workaround for our use-case so should #627 get reverted it's not going to be a big deal for us.

[Pilskalns]

Ah, I see now where the disabled logic comes from. So to do it properly, I should be putting the clear button outside of the input, not inside.

I can do either way, kind of already did a quick workaround that looks the same as before but the disabled state is div that wraps around.
It is just 10x lines instead of 1x as before.

{{--            Temporary workaround, notably - the wire:click event --}}
            <flux:text class="rounded-lg border-solid border border-zinc-200 h-10 py-2 pl-3 pr-10 relative">
                <span class="text-zinc-800  dark:text-white">{{$display}}</span>
                <div class="absolute top-0 bottom-0 flex items-center justify-center pr-2 right-0">
                    <flux:button
                        :size="'sm'"    tabindex="-1"
                        class="-mr-1"   aria-label="{{__('Clear input')}}"
                        square="true"   variant="subtle"
                        wire:click="$set('display','')"
                        >
                            <flux:icon.x-mark variant="micro" />
                    </flux:button>
                </div>
            </flux:text>
{{--            <flux:input disabled clearable wire:model.live="display" />--}}

For me, the X inside feels and looks better, especially on the touchscreen

[joshhanley]

I use a component (non-flux) in one of my apps the same way.

When a client is selected, the input is disabled (so they can't click and the dropdown won't open) and the clear button is active.

But then when they click clear, the selected value is cleared and the input becomes enabled again and the dropdown can be accessed again.

I've not converted this app to Flux yet, so haven't run into this.

So personally I'd love to have support for it, but definitely understand if it's preferred not to 🙂