[bug]: Multiple Selector clear all button

[Crea7orX]

Describe the bug

Multiple Selector clear all button when pressed not calling onChange event

Here is fixed code and better positioning of the button:
<div className="relative flex flex-wrap gap-1 pr-8"> {selected.map((option) => { return ( <Badge key={option.value} className={cn( "data-[disabled]:bg-muted-foreground data-[disabled]:text-muted data-[disabled]:hover:bg-muted-foreground", "data-[fixed]:bg-muted-foreground data-[fixed]:text-muted data-[fixed]:hover:bg-muted-foreground", badgeClassName )} data-fixed={option.fixed} data-disabled={disabled || undefined} > {option.label} <button className={cn( "ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2", (disabled || option.fixed) && "hidden" )} onKeyDown={(e) => { if (e.key === "Enter") { handleUnselect(option); } }} onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); }} onClick={() => handleUnselect(option)} > < className="h-3 w-3 text-muted-foreground hover:text-foreground" /> </button> </Badge> ); })} {/* Avoid having the "Search" Icon */} <CommandPrimitive.Input {...inputProps} ref={inputRef} value={inputValue} disabled={disabled} onValueChange={(value) => { setInputValue(value); inputProps?.onValueChange?.(value); }} onBlur={(event) => { if (!mouseOn.current) { setOpen(false); } inputProps?.onBlur?.(event); }} onFocus={(event) => { setOpen(true); triggerSearchOnFocus && onSearch?.(debouncedSearchTerm); inputProps?.onFocus?.(event); }} placeholder={ hidePlaceholderWhenSelected && selected.length !== 0 ? "" : placeholder } className={cn( "flex-1 bg-transparent outline-none placeholder:text-muted-foreground", { "w-full": hidePlaceholderWhenSelected, "px-3 py-2": selected.length === 0, "ml-1": selected.length !== 0, }, inputProps?.className )} /> {!( hideClearAllButton || disabled || selected.length < 1 || selected.filter((s) => s.fixed).length === selected.length ) && ( <Button variant="ghost" onClick={() => { setSelected( selected.filter((s) => s.fixed) ); onChange?.(selected.filter((s) => s.fixed)); }} className="absolute right-0 h-6 w-6 p-0" > <X /> </Button> )} </div>

Affected component/components

Multiple Selector

How to reproduce

1. Import Multiple Selector component
2. Use it in form
3. Press clear all button
4. Send the form
5. See the problem

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

No response

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[ezeparziale]

I created a PR #112