Closed nicholaschiang closed 6 months ago
Makes sense to use Command.List
as a container instead of Command
and I think there is no need to add a listRef
prop, would use the context to get the Command.List
ref
+1, this is kind of a big deal if this project should interop with Radix. It depends on Radix’s Dialog
which also portals, so I'd be surprised if this isn’t breaking in a lot of common use-cases.
Would also be glad to submit a PR, I may need to fork this anyway to fix this for our own work.
@pacocoursey Is this problem supposed to be solved in 0.2.1? I still can't output Command.List inside Radix.Portal as in the example above
@pacocoursey im using radix popover + cmdk. Without Portal it works ok, but when CommandList is wrapped into Portal its breaks. List is rendered correctly but all keyboard actions not working. Can't change and select items using arrow up/down and enter.
@pacocoursey I think, that something breaks during minification your source file https://github.com/pacocoursey/cmdk/blob/v0.2.1/cmdk/src/index.tsx I tried Copy/Paste that code directly into a project and it works perfectly.
@pacocoursey im using radix popover + cmdk. Without Portal it works ok, but when CommandList is wrapped into Portal its breaks. List is rendered correctly but all keyboard actions not working. Can't change and select items using arrow up/down and enter.
Ran into the same
@pacocoursey im using radix popover + cmdk. Without Portal it works ok, but when CommandList is wrapped into Portal its breaks. List is rendered correctly but all keyboard actions not working. Can't change and select items using arrow up/down and enter.
Same here
Same - the "optionally pass a ref" suggestion from comment:1 seems like a pretty flexible solve to me.
This isn't necessarily a bug—as the documentation never states this is supported—but much of CMDK's functionality breaks down when the
<Command.List>
is rendered in a Radix<Portal>
(e.g. when building a combobox component) and thus is not a child of the<Command>
HTML component, which causes all of theref.current.querySelectorAll
to fail:It would be nice to be able to pass in a
listRef
property that points to the<Command.List>
component like so:CMDK would then be able to use that
listRef
(if it exists) in place of its built-inref
whenever possible.If this seems like a viable solution @raunofreiberg @pacocoursey, let me know and I can throw up a PR.
It may also be informative to have some examples of implementing a
<Combobox>
using this library. The README describes "⌘K is a command menu React component that can also be used as an accessible combobox." For example, how exactly did Rauno use the 2019 version for Vercel's combobox? Adding an example snippet or implementation to the docs will hopefully prevent a bunch of naive, junior developers such as myself from creating issues like this one. :)