is-danger isn't being propagated from Field to Input class

[asm0dey]

I'm trying to use svelma with Svelte forms lib (https://github.com/tjinauyeung/svelte-forms-lib).

I have following field:

<Field label="Password" type={!!$errors.password?"is-danger":""} message="{$errors.password}">
	<Input
					bind:value={$form.password}
					passwordReveal="true"
					type="password"
					name="password"
					on:change={handleChange}/>
</Field>

When entered password is invalid rendered html looks like this:

<div message="this must be at least 6 characters" class="field is-danger svelte-utp4kb">
	<label for="" class="label">Password</label>
	<div class="control svelte-1v5s752 has-icons-right">
		<input name="password" type="password" class="input svelte-1v5s752">
		<span class="icon has-text-primary is-right is-clickable"><i class="fas fa-eye  "></i></span>
	</div>
	<p class="help is-danger svelte-utp4kb">this must be at least 6 characters</p>
</div>

As you can see is-danger class isn't being propagated to input, which leads to rendering red border.

[sharpcodepro]

Observing the same issue. In my understanding, this happens because the type in Input component is retrieved with getContext. Per Svelte documentation "Since context is not reactive, values that change over time should be represented as stores".

[abbychau]

seems that svelte/store is needed for this feature

[saravanabalagi]

We can put a store in the context and subscribe to it.

[MeXaaR]

We can put a store in the context and subscribe to it.

Have you tried that solution ? because I can't make it work