Closed army-u8 closed 6 months ago
You can control the open state for custom behavior using the open
and onOpenChange
props on <Select.Root/>
https://kobalte.dev/docs/core/components/select#selectroot.
Here's an example of the same props from the Tooltip component: https://kobalte.dev/docs/core/components/tooltip#controlled-open.
You can control the open state for custom behavior using the
open
andonOpenChange
props on<Select.Root/>
https://kobalte.dev/docs/core/components/select#selectroot.Here's an example of the same props from the Tooltip component: https://kobalte.dev/docs/core/components/tooltip#controlled-open.
Thank you for your answer, I found that I placed the action button inside on <Select.ItemLabel>
, it should be placed in the sibling element with <Select.ItemLabel>
,Now able to trigger the click event for button
But there's another problem here,the action button isDialog
trigger use as open dialog ,I successfully opened the dialog, but as the <Select.Content>
disappeared, the dialog also disappeared ,i try to log dialog props onOpenChange
, no result
Test code as like
<Select.Root
options={["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"]}
placeholder="Select a fruit…"
itemComponent={(props) => (
<Select.Item item={props.item} class={style.select__item}>
<Select.ItemLabel>{props.item.rawValue}</Select.ItemLabel>
<TestDialog
trigger={
<button>
open
</button>
}
/>
</Select.Item>
)}
>
<Select.Trigger class={style.select__trigger} aria-label="Fruit">
<Select.Value<string> class={style.select__value}>{(state) => state.selectedOption()}</Select.Value>
<Select.Icon class={style.select__icon}>
<IconCaretDown />
</Select.Icon>
</Select.Trigger>
<Select.Portal>
<Select.Content class={style.select__content}>
<Select.Listbox class={style.select__listbox} />
</Select.Content>
</Select.Portal>
</Select.Root>
function TestDialog(props: { trigger: JSX.Element }) {
return (
<Dialog.Root>
<Dialog.Trigger class={style.dialog__trigger}>{props.trigger}</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay class={style.dialog__overlay} />
<div class={style.dialog__positioner}>
<Dialog.Content class={style.dialog__content}>
<div class={style.dialog__header}>
<Dialog.Title class={style.dialog__title}>About Kobalte</Dialog.Title>
<Dialog.CloseButton class={style.dialog__close_button}></Dialog.CloseButton>
</div>
<Dialog.Description class={style.dialog__description}>
Kobalte is a UI toolkit for building accessible web apps and design systems with SolidJS. It provides a
set of low-level UI components and primitives which can be the foundation for your design system
implementation.
</Dialog.Description>
</Dialog.Content>
</div>
</Dialog.Portal>
</Dialog.Root>
)
}
When the button in the select item called click event , cannot prevent the close of the select item and call click event
I want to trigger a button click event and prevent the close of select when the button is clicked. thanks