pablo-abc / felte

An extensible form library for Svelte, Solid and React
https://felte.dev
MIT License
1.02k stars 44 forks source link

Issue with connecting Svelecte autocomplete field to Felte data #238

Open saharulit opened 1 year ago

saharulit commented 1 year ago

Describe the bug

I am attempting to use Svelecte as an autocomplete input field within my form, and I am encountering a problem with connecting it to Felte for data management. The issue is that the data does not update when a new option is selected from the autocomplete dropdown.

Expected behavior: When selecting an option from the Svelecte autocomplete dropdown, the Felte-managed data should update accordingly to reflect the selected option.

Which package/s are you using?

felte (Svelte)

Environment

To reproduce

No response

Small reproduction example

https://svelte.dev/repl/5420ffbff15a49978e9feec06539970f?version=3.59.1

Screenshots

No response

Additional context

No response

pablo-abc commented 1 year ago

Svelecte is an example of a component that doesn't work quite well with Felte. The solution would be updating manually the data store on change (by adding this to Svelecte) on:change={(e) => setData('color', e.detail.value)}

Or, if you're going to reuse Svelecte in multiple places with Felte, you may use the createField helper to make it "discoverable" to Felte.

Svelecte uses an HTML select element under the hood, but it's still a problem for Felte for two reasons:

  1. Programmatically changing the value of an input/select does not trigger any events, so Felte can't catch these changes.
  2. Svelecte seems to be handling the "selected" value by removing all the <option> elements from the <select> except the selected ones. This also does not trigger any events and is an unconventional way of handling selection. (And it wouldn't work for multi selection, since no <option> element has a selected attribute).
cemkaan commented 1 year ago

Are there any recommended autocomplete input solution? How about svelte-select?