diff --git a/.changeset/breezy-crabs-film.md b/.changeset/breezy-crabs-film.md new file mode 100644 index 000000000..a92f96aab --- /dev/null +++ b/.changeset/breezy-crabs-film.md @@ -0,0 +1,5 @@ +--- +'@qwik-ui/headless': patch +--- + +feat: Adding the bind:open signal prop to the select component can now reactively control the select listbox open state diff --git a/apps/website/src/routes/docs/headless/select/examples/bind-open.tsx b/apps/website/src/routes/docs/headless/select/examples/bind-open.tsx new file mode 100644 index 000000000..e2af01c91 --- /dev/null +++ b/apps/website/src/routes/docs/headless/select/examples/bind-open.tsx @@ -0,0 +1,34 @@ +import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +import { + Select, + SelectListbox, + SelectOption, + SelectPopover, + SelectTrigger, + SelectValue, +} from '@qwik-ui/headless'; +import styles from '../snippets/select.css?inline'; + +export default component$(() => { + useStyles$(styles); + const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']; + const isOpen = useSignal(false); + + return ( + <> + + + + ); +}); diff --git a/apps/website/src/routes/docs/headless/select/index.mdx b/apps/website/src/routes/docs/headless/select/index.mdx index 5ce69a7ec..603d96b67 100644 --- a/apps/website/src/routes/docs/headless/select/index.mdx +++ b/apps/website/src/routes/docs/headless/select/index.mdx @@ -173,10 +173,14 @@ We can pass reactive state by using the `bind:value` prop to the `