Skip to content

Advanced Select (tags not allow spaces, " ") #574

Closed
@jmina01

Description

@jmina01

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">

Image

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions