feat: Implement shortcut to focus search

[dmtrKovalenko]

"/" to focus search is a widely popular shortcut for the quick focus of the search input.

Examples:

1. Github (take a look on the top-left corner)
2. https://tailwindcss.com/
3. https://docs.cypress.io/
4. even https://reasonml.github.io/

There is another one – meta+k I can implement it as well if you want :)

[dmtrKovalenko]

this may not work as expected in IE, but who cares?

[ryyppy]

Hey, thanks for the idea.
I am not sure we should implement this right now, because it might have unexpected side-effects on different parts of the website.

For instance, right now it breaks the playground since you can't use the / character in the editor.

[dmtrKovalenko]

Thanks, @ryyppy for the fast feedback, but this is a kinda important feature (at least for the home page). If you are not sure about sopping event propagation on the text-fields what do you think about making this only for the home page?

I am a little bit suffering right now with rescript docs, cause I need to take mouse all the time :)

[dmtrKovalenko]

Or I have another idea of how to make it more correct – what if we will handle input only if the event target is not an input? I think this will handle all the edge cases, maybe except content-editable divs. And probably will require some instanceof hack for rescript

[ryyppy]

@dmtrKovalenko would be interesting to see how e.g. tailwind's docs implemented that feature. I think it is not enough just making assumptions on the dom element type.

[dmtrKovalenko]

I was doing this feature for cypress docs, but ok I'll make some kind of research of how this done ☑️

[dmtrKovalenko]

For tailwindcss.com – https://github.com/tailwindlabs/tailwindcss.com/blob/0ce320045d2836ea6fc68ccb834c93364536f731/src/components/Search.js

They are using @docsearch/react. I didn't find sources anywhere O_O but if you will install npm package you will see

import React from 'react';
export function useDocSearchKeyboardEvents(_ref) {
  var isOpen = _ref.isOpen,
      onOpen = _ref.onOpen,
      onClose = _ref.onClose;
  React.useEffect(function () {
    function onKeyDown(event) {
      if (event.keyCode === 27 && isOpen || event.key === 'k' && (event.metaKey || event.ctrlKey)) {
        event.preventDefault();

        if (isOpen) {
          onClose();
        } else {
          onOpen();
        }
      }
    }

    window.addEventListener('keydown', onKeyDown);
    return function () {
      window.removeEventListener('keydown', onKeyDown);
    };
  }, [isOpen, onOpen, onClose]);
}

But this will steal focus from any keyboard node, much better example is material-ui which is doing exactly what I said – checks that the current active target is not a focusable element

https://github.com/mui-org/material-ui/blob/0e00a4997700643188a43d1636ba8a71d333209a/docs/src/modules/components/AppSearch.js#L162

      const matchMainShortcut =
        (nativeEvent.ctrlKey || nativeEvent.metaKey) && nativeEvent.key === 'k';
      const matchNonkeyboardNode =
        ['INPUT', 'SELECT', 'TEXTAREA'].indexOf(document.activeElement.tagName) === -1 &&
        !document.activeElement.isContentEditable;

      if (matchMainShortcut && matchNonkeyboardNode) {
        nativeEvent.preventDefault();
        inputRef.current.focus();
      }

[dmtrKovalenko]

@ryyppy I updated my implementation to avoid any kind of focus stealing

[ryyppy]

Nitpick, not sure if you are aware of this. You can set a fixed param like keydown via the as("keydown") _ placeholder:

Suggested change

	external addKeyboardEventListener: (string, keyboardEventLike => unit) => unit = "addEventListener"
	external addKeydownEventListener: (@as("keydown") _, keyboardEventLike => unit) => unit = "addEventListener"

[ryyppy]

will merge anyways, since this will be easy to refactor later

[dmtrKovalenko]

Nice didn't know this is possible! :)

[ryyppy]

Looking good! Thanks for going the extra mile double checking with the other implementations.