Can i toggle kbar using setVisualState?

[gaganmeet]

This is how my component looks and I am using chrome commands API to listen to event

function ToggleKBar() {
  const { query, options, visualState, showing } = useKBar((state) => ({
    visualState: state.visualState,
    showing: state.visualState !== VisualState.hidden,
  }))
  console.log('showing state', showing, 'visualState', visualState)
  useEffect(() => {
    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
      console.log('message received', request)
      if (request.action === ExtensionMessageAction.COMMAND_RECEIVED) {
        query.setVisualState(VisualState.showing)
      }
    })
  }, [])
  return <></>
}

This is how my components are structured

ReactDOM.render(
  <React.StrictMode>
    <KBarProvider
      options={{
        enableHistory: true,
        toggleShortcut: '$mod+q ',
      }}
      actions={actions}
    >
      <ToggleKBar />
      <KBarPortal>
        <KBarPositioner style={{ zIndex: 999 }}>
          <KBarAnimator style={animatorStyle}>
            <KBarSearch style={searchStyle} />
            <RenderResults />
          </KBarAnimator>
        </KBarPositioner>
      </KBarPortal>
    </KBarProvider>
  </React.StrictMode>,
  document.getElementById('kbar')
)

The reason I am using commands API is that hotkeys don't work for contenteditable=true divs

[timc1]

I don't see why not! Does this work for your use case?

[yckbilly1929]

Same case for me.

On the other hand, i tried with programmatically open with query.toggle, it does not trigger callbacks.onOpen.

[stale[bot]]

Hey! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.