How to close the modal from inside a command or onSelect?

[dariusj18]

I want to perform an asynchronous action inside a command, but I can't figure out how to close the pallet once the action is complete.

export function AppCommandPalette () {
  const commands = [
    {
      name: 'Do Something',
      command() {
        doSomething().then(() => {
          doSomethingToCloseTheModalHere();
        });
      },
    },
  ];

  return (
      <CommandPalette commands={commands} resetInputOnOpen={true} />
  );
}

[asabaylus]

Begin by setting closeOnSelect to false which will prevent the palette from automaticaly closing. Also you can optionaly set showSpinnerOnSelect to false to prevent the spinner from showing. Make resetInputOnOpen true so that the palette will reset the next time its opened.

Now that the palette won't close when the user selects the async command use a react hook to update open prop to false. For the next time the palette is opened you may need to change the open state back to true again

      onAfterOpen={() => {
        setOpen(true);
      }}

Here's a complete example:
https://codesandbox.io/s/react-command-palette-closemodal-hoq90?file=/src/index.js