konstaui / konsta

Mobile UI components made with Tailwind CSS
https://konstaui.com
MIT License
3.3k stars 119 forks source link

Wrong focus styling for ListInputItems with slot="input" #191

Open kochelmonster opened 5 months ago

kochelmonster commented 5 months ago

Check that this is really a bug

Reproduction link

See description

Bug description

If you declare a ListInput element with a slot="input" child like:

<ListInput label="Price">
    <CurrencyInput slot="input" name="total" value={0.0} currency="EUR" inputClasses={
        { 
          formatted: 'bg-transparent outline-none',
          formattedPositive: 'bg-transparent',
          formattedNegative: "",
          formattedZero: ""
        }}/>
</ListInput>

the styling (e.g color change of label) does not change, when the field is focused.

According to the source code in "ListInput.svelte" the onFocusInternal is not called for slot="input"-Children.

The easiest solution would be to export the isFocused-Field, so the focus-State can be manipulated from outside.

Expected Behavior

see description

Actual Behavior

see description

Konsta UI version

v3.1.2

Platform/Target and Browser Versions

macOS, Windows, Cordova, iOS, Android, Chrome

Validations

Would you like to open a PR for this bug?