htmlstreamofficial / preline

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
https://preline.co
Other
4.9k stars 309 forks source link

When Submitting Advanced Select with apiUrl the title is submitted instead of the value #481

Open x9sim9 opened 1 month ago

x9sim9 commented 1 month ago

Summary

The select submits the title instead of the value when using apiUrl

Steps to Reproduce

https://preline.co/docs/advanced-select.html#remote-data

Using the example provided, its setting the option values like this <option value="Essence Mascara Lash Princess" data-id="1"

instead of like this <option value="1" data-id="1"

Demo Link

https://preline.co/docs/advanced-select.html#remote-data

Expected Behavior

<option value="1" data-id="1"

Actual Behavior

<option value="Essence Mascara Lash Princess" data-id="1"

Screenshots

ryansteele commented 3 weeks ago

Same issue here. Select submits "data-value", which gets set to the apiFieldsMap "title" field. Cannot get select to use the ID for data-value.

In my case, API is returning array of JSON objects in the following format:

{id: "1000420", name: "FM Q3 MENS FALL 1 2025"}

The following option is set for the select:

"apiFieldsMap": { "id": "id", "title": "name" }

The result is:

<div data-value="FM Q3 MENS FALL 1 2025" data-title-value="FM Q3 MENS FALL 1 2025" data-id="1000420">

The expected/desired result would be:

<div data-value="1000420" data-title-value="FM Q3 MENS FALL 1 2025" data-id="1000420">

Or an option to have select submit "data-id" instead of "data-value"

Root-acess commented 2 weeks ago

In this setup:

The API returns an array of JSON objects, e.g., {id: "1000420", name: "FM Q3 MENS FALL 1 2025"}.

The configuration apiFieldsMap: { "id": "id", "title": "name" } maps the fields, but data-value ends up set to the title instead of the id.

Suggested Solution Add an option to allow data-value to be mapped to data-id instead of title, so that data-value reflects the id field for submissions. This would improve compatibility for cases where the id field is the preferred submit value.