Closed
Description
Summary
Tags not allow space " ".
Steps to Reproduce
For example, if i need to write a complete name, this input only allow one name, no more:
<div class="relative w-64">
<select multiple
data-hs-select='{
"placeholder": "Select option...",
"wrapperClasses": "hs-select-active:ring-1 hs-select-active:ring-blue-500 pe-9 rounded-lg flex items-center flex-wrap border border-gray-200 shadow-sm dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex cursor-pointer bg-white border border-gray-200 rounded-lg text-sm dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400",
"dropdownClasses": "mt-2 z-50 w-full max-h-72 p-1 space-y-0.5 bg-white rounded-lg overflow-hidden overflow-y-auto shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] dark:bg-neutral-900",
"optionClasses": "hs-selected:bg-gray-100 dark:hs-selected:bg-neutral-800 py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-none focus:bg-gray-100 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800",
"mode": "tags",
"tagSeperators": [","],
"tagsClasses": "relative ps-0.5 pe-9 min-h-[38px] flex items-center flex-wrap border border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-900 dark:text-neutral-400",
"tagsItemTemplate": "<div class=\"flex flex-nowrap items-center relative z-10 bg-white border border-gray-200 rounded-full p-[3px] m-0.5 dark:bg-neutral-900 dark:border-neutral-700\"><div class=\"size-6 me-1\" data-icon></div><div class=\"whitespace-nowrap\" data-title></div><div class=\"inline-flex shrink-0 justify-center items-center size-5 ms-2 rounded-full text-gray-800 bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 text-sm dark:bg-neutral-700 dark:hover:bg-neutral-700 dark:text-neutral-400 cursor-pointer\" data-remove><svg class=\"shrink-0 size-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg></div></div>",
"tagsInputClasses": "py-[9px] px-4 order-1 text-sm bg-transparent rounded-lg focus-visible:outline-none dark:bg-neutral-800 dark:bg-neutral-700 dark:text-neutral-400 dark:placeholder:text-neutral-400",
"optionTemplate": "<div class=\"flex items-center\"><div class=\"size-8 me-2\" data-icon></div><div><div class=\"text-sm font-semibold text-gray-800 dark:text-neutral-200\" data-title></div><div class=\"text-xs text-gray-500 dark:text-neutral-500\" data-description></div></div><div class=\"ms-auto\"><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"/></svg></span></div></div>"
}'
class="hidden">
Demo Link
https://preline.co/pro/examples/forms-add-create.html
Expected Behavior
i would like the input box/ select box allow write with space for type complete names or another values that need spaces
Actual Behavior
I dont found the way for the input box allow the inputs for space " " because it's a tag, which is the correct way for it?
this is the template:
"User Profile Create Event",
box= invite
Screenshots
No response
Metadata
Metadata
Assignees
Labels
No labels