Unable to clear Time Picker

Describe the bug Unlike the datetime picker the time picker does not have a clearable option, that allows you to control whether the time is mandatory or not.

Of course, we can set validation to enforce this, but the UI is giving clues to the user that it can be removed with the X which would be incorrect in my case, as they are mandatory.

To Reproduce Steps to reproduce the behavior:

Add <x-time-picker ... /> to component.
Set a value.
X will appear, allowing you to clear it.

Expected behavior Time picker should ideally follow the datetime picker, where the clearable attribute is available to disable this functionality.

Screenshots or Videos

Dependencies

WireUI Version: 1.18
Laravel Version: 10.24.0
Alpine.js Version: 3.13
Livewire Version: 3.0.5
Lang: en_GB

Additional context Not sure if this is the best approach so can supply a PR if required, but modified the view to make it work:

<div
    x-data="wireui_timepicker({
        model: @entangleable($attributes->wire('model')),
        config: {
            isBlur:   @boolean($attributes->wire('model')->hasModifier('blur')),
            interval: @toJs($interval),
            format:   @toJs($format),
            is12H:    @boolean($format == '12'),
            readonly: @boolean($readonly),
            disabled: @boolean($disabled),
            clearable: @boolean($attributes->get('clearable', 1)),
        },
    })"
    {{ $attributes
        ->only('wire:key')
        ->class('w-full relative')
        ->merge(['wire:key' => "timepicker::{$name}"]) }}
>
    <div class="relative">
        <x-dynamic-component
            :component="WireUi::component('input')"
            {{ $attributes->whereDoesntStartWith(['wire:model', 'x-model', 'wire:key']) }}
            :borderless="$borderless"
            :shadowless="$shadowless"
            :label="$label"
            :hint="$hint"
            :corner-hint="$cornerHint"
            :icon="$icon"
            :prefix="$prefix"
            :prepend="$prepend"
            x-model="input"
            x-on:input.debounce.150ms="onInput($event.target.value)"
            x-on:blur="emitInput">
            <x-slot name="append">
                <div class="absolute inset-y-0 right-3 z-5 flex items-center justify-center">
                    <div @class([
                        'flex items-center gap-x-2 my-auto',
                        'text-negative-400 dark:text-negative-600' => $name && $errors->has($name),
                        'text-secondary-400'                         => $name && $errors->has($name),
                    ])>
                        <x-dynamic-component
                            :component="WireUi::component('icon')"
                            class="cursor-pointer w-4 h-4 hover:text-negative-500 transition-colors ease-in-out duration-150"
                            x-cloak
                            name="x"
                            x-show="!config.readonly && config.clearable && !config.disabled && input"
                            x-on:click="clearInput"
                        />

                        <x-dynamic-component
                            :component="WireUi::component('icon')"
                            class="cursor-pointer w-5 h-5 text-gray-400 dark:text-gray-600"
                            name="clock"
                            x-show="!config.readonly && !config.disabled"
                            x-on:click="toggle"
                        />
                    </div>
                </div>
            </x-slot>
        </x-dynamic-component>
    </div>

    <x-wireui::parts.popover
        class="p-2.5"
        :margin="(bool) $label"
        x-on:keydown.tab.prevent="$event.shiftKey || getNextFocusable().focus()"
        x-on:keydown.arrow-down.prevent="$event.shiftKey || getNextFocusable().focus()"
        x-on:keydown.shift.tab.prevent="getPrevFocusable().focus()"
        x-on:keydown.arrow-up.prevent="getPrevFocusable().focus()"
    >
        <x-dynamic-component
            :component="WireUi::component('input')"
            :label="trans('wireui::messages.selectTime')"
            tabindex="0"
            x-model="search"
            x-bind:placeholder="input ? input : '12:00'"
            x-ref="search"
            x-on:input.debounce.150ms="onSearch($event.target.value)"
        />

        <ul class="mt-1 w-full h-64 sm:h-32 pb-1 pt-2 overflow-y-auto soft-scrollbar">
            <template x-for="time in filteredTimes">
                <li class="group rounded-md focus:outline-none focus:bg-primary-100 hover:text-white
                            hover:bg-primary-600 cursor-pointer select-none relative py-2 pl-2 pr-9
                            dark:hover:bg-secondary-700"
                    :class="{
                        'text-primary-600 dark:text-secondary-400':   input === time.value,
                        'text-secondary-700 dark:text-secondary-400': input !== time.value,
                    }"
                    tabindex="0"
                    x-on:keydown.enter="selectTime(time)"
                    x-on:click="selectTime(time)">
                    <span x-text="time.label" class="font-normal block truncate"></span>
                    <span
                        class="
                            absolute text-primary-600 group-hover:text-white inset-y-0
                            right-0 flex items-center pr-4 dark:text-secondary-400
                        "
                        x-show="input === time.value">
                        <x-dynamic-component
                            :component="WireUi::component('icon')"
                            name="check"
                            class="h-5 w-5"
                        />
                    </span>
                </li>
            </template>
        </ul>
    </x-wireui::parts.popover>
</div>

wireui / wireui

Unable to clear Time Picker #739