Control over Detached Mode

[sarahdayan]

There's currently no API to programmatically control the state of the search modal in Detached Mode. It would be handy to add this to the autocomplete state, to handle, for example, keyboard shortcuts.

The state would contain a new getter and setter: isModalOpen and setIsModalOpen.

Here's what usage would look like:

let isModalOpen = false;

const { setIsModalOpen } = autocomplete({
  // ...
  onStateChange({ state }) {
    isModalOpen = state.isModalOpen;
  },
});

document.addEventListener('keyup', (event) => {
  event.preventDefault();
  const { ctrlKey, metaKey, key } = event;

  if ((ctrlKey || metaKey) && key === 'k') {
    setIsModalOpen(!isModalOpen);
  }
});

[francoischalifour]

Since #556, we synchronize the modal state with the panel state, meaning that calling setIsOpen drives the modal open state—without additional API.

It's released in 1.0.0-alpha.48.

[meotimdihia]

Hi, I tried to use setIsOpen but it doesn't work well. I wrote a question + demo here:

#1185 (reply in thread)

[jsoneaday]

I am coming from vue and nuxt 3. How can I get keyboard shortcuts to work. I thought the default behavior was command + k opens the modal or closes it. But for me it does nothing.

onMounted(() => {
      autocomplete({
        container: '#autocomplete',
        openOnFocus: true,
        detachedMediaQuery: '',
        navigator: {
          navigate({ itemUrl }) {
            window.location.assign(itemUrl);
          },
          navigateNewTab({ itemUrl }) {
            const windowReference = window.open(itemUrl, '_blank', 'noopener');

            if (windowReference) {
              windowReference.focus();
            }
          },
          navigateNewWindow({ itemUrl }) {
            window.open(itemUrl, '_blank', 'noopener');
          },
        },
        // reset of code ...
    });
});