preline icon indicating copy to clipboard operation
preline copied to clipboard

Advanced Select remote-data regression in 3.1.0

Open jiblits opened this issue 6 months ago • 0 comments

Summary

In 3.1.0 of preline select when the query is empty the query parameter being sent is the search query key

The regression specifically comes from changes made to the apiRequest function. I am unfortunately having issues permalinking to the offending lines in the release notes for v.3.1.0 but it's lines 1156 to 1194 in plugins/select/index.ts

Steps to Reproduce

Create an Advanced Selected with the following configuration within data-hs-select following the remote-data example from the documentation

{
    "placeholder": "Start typing a doctor's name",
    "dropdownClasses": "space-y-0.5 z-20 bg-white border border-gray-200 rounded-lg [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:bg-neutral-900 dark:border-neutral-700 top-10 left-0 w-full",
    "tagsInputId": "hs-tags-input",
    "tagsInputClasses": "px-2 rounded-lg order-1 border-transparent focus:ring-0 text-sm outline-hidden dark:bg-neutral-900 dark:placeholder-neutral-500 dark:text-neutral-400 w-full",
    "tagsItemTemplate": "<div class=\"flex flex-nowrap items-center text-nowrap relative z-10 bg-gray-100 rounded-sm p-1 m-1 dark:bg-neutral-700\"><div class=\"whitespace-nowrap text-gray-800 dark:text-neutral-200\" data-title=\"\"></div><div class=\"inline-flex shrink-0 justify-center items-center size-5 ms-6 rounded-md text-gray-800 hover:bg-gray-200 focus:outline-hidden focus:ring-2 focus:ring-gray-400 text-sm cursor-pointer dark:bg-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600\" data-remove=\"true\"><!-- BEGIN app/components/icon_component.html.erb --><svg aria-hidden=\"true\" fill=\"currentColor\" viewbox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\" class=\"shrink-0 size-3\">\n  <path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\"></path>\n</svg>\n\n\n<!-- END app/components/icon_component.html.erb --></div></div>",
    "apiUrl": "https://dummyjson.com/products/search",
    "apiQuery": null,
    "apiSearchQueryKey": "q",
    "apiDataPart": "products",
    "apiFieldsMap": {
        "id": "id",
        "val": "id",
        "title": "title"
    },
    "mode": "tags",
    "hasSearch": false,
    "isSearchDirectMatch": false,
    "searchPlaceholder": "Start typing a doctor's name",
    "wrapperClasses": "relative pe-9 min-h-11.5 flex items-center flex-wrap w-full border border-gray-200 rounded-lg text-start text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 ps-8",
    "searchClasses": "block w-full px-3 sm:text-sm border-gray-200 rounded-lg focus:border-blue-500 focus:ring-blue-500 before:absolute before:inset-0 before:z-1 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500",
    "searchWrapperClasses": "bg-white p-2 rounded-lg sticky dark:bg-neutral-900",
    "toggleTag": "<button type=\"button\" class=\"h-full\" aria-expanded=\"false\"></button>",
    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 advanced-select-toggle",
    "optionTemplate": "<div class=\"flex items-center justify-between\"><div data-title=\"\"></div><div data-icon=\"\"></div><div class=\"hidden hs-selected:block\"><!-- BEGIN app/components/icon_component.html.erb --><svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewbox=\"0 0 24 24\" class=\"text-primary-700 dark:text-neutral-200 w-4 h-4\">\n  <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 11.917 9.724 16.5 19 7.5\"></path>\n</svg>\n\n\n<!-- END app/components/icon_component.html.erb --></div></div>",
    "optionClasses": "py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-hidden focus:bg-gray-100 dark:text-neutral-200 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800",
    "extraMarkup": "<div class=\"absolute top-1/2 -translate-y-1/2 start-3\">\n<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewbox=\"0 0 256 256\" class=\"w-4 h-4\">\n  <path d=\"M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z\"></path>\n</svg>\n\n</div>"
}

Demo Link

https://codesandbox.io/p/sandbox/9p8jzq

Expected Behavior

When the apiQuery attribute is missing or empty the query is still submitted correctly.

This was the behaviour in Preline 3.0.0

Actual Behavior

When the apiQuery attribute is not included / is null / is an empty string, the AdvancedSelect constructs an incorrect query (the search parameter is entered as the query)

https://dummyjson.com/products/search?q=?q= (?q= is the search that is submitted to the server)

Screenshots

Image

Image

Image

When the apiQuery is set to anything.

Image

Image

Image

jiblits avatar Jun 06 '25 15:06 jiblits