fix: Down arrow in search input should move focus to results (#2257)

closes #2253

app/components/DocumentListItem.js

@@ -41,7 +41,7 @@ function replaceResultMarks(tag: string) {
   return tag.replace(/<b\b[^>]*>(.*?)<\/b>/gi, "$1");
 }
 
-function DocumentListItem(props: Props) {
+function DocumentListItem(props: Props, ref) {
   const { t } = useTranslation();
   const { policies } = useStores();
   const currentUser = useCurrentUser();
@@ -68,6 +68,7 @@ function DocumentListItem(props: Props) {
 
   return (
     <DocumentLink
+      ref={ref}
       $isStarred={document.isStarred}
       $menuOpen={menuOpen}
       to={{
@@ -251,4 +252,4 @@ const ResultContext = styled(Highlight)`
   margin-bottom: 0.25em;
 `;
 
-export default observer(DocumentListItem);
+export default observer(React.forwardRef(DocumentListItem));

app/components/Sidebar/components/DocumentLink.js

@@ -27,16 +27,19 @@ type Props = {|
   parentId?: string,
 |};
 
-function DocumentLink({
-  node,
-  canUpdate,
-  collection,
-  activeDocument,
-  prefetchDocument,
-  depth,
-  index,
-  parentId,
-}: Props) {
+function DocumentLink(
+  {
+    node,
+    canUpdate,
+    collection,
+    activeDocument,
+    prefetchDocument,
+    depth,
+    index,
+    parentId,
+  }: Props,
+  ref
+) {
   const { documents, policies } = useStores();
   const { t } = useTranslation();
 
@@ -236,6 +239,7 @@ function DocumentLink({
                 depth={depth}
                 exact={false}
                 showActions={menuOpen}
+                ref={ref}
                 menu={
                   document && !isMoving ? (
                     <Fade>
@@ -289,5 +293,6 @@ const Disclosure = styled(CollapsedIcon)`
   ${({ expanded }) => !expanded && "transform: rotate(-90deg);"};
 `;
 
-const ObservedDocumentLink = observer(DocumentLink);
+const ObservedDocumentLink = observer(React.forwardRef(DocumentLink));
+
 export default ObservedDocumentLink;

app/components/Sidebar/components/SidebarLink.js

@@ -29,25 +29,28 @@ type Props = {
   depth?: number,
 };
 
-function SidebarLink({
-  icon,
-  children,
-  onClick,
-  onMouseEnter,
-  to,
-  label,
-  active,
-  isActiveDrop,
-  menu,
-  showActions,
-  theme,
-  exact,
-  href,
-  depth,
-  history,
-  match,
-  className,
-}: Props) {
+function SidebarLink(
+  {
+    icon,
+    children,
+    onClick,
+    onMouseEnter,
+    to,
+    label,
+    active,
+    isActiveDrop,
+    menu,
+    showActions,
+    theme,
+    exact,
+    href,
+    depth,
+    history,
+    match,
+    className,
+  }: Props,
+  ref
+) {
   const style = React.useMemo(() => {
     return {
       paddingLeft: `${(depth || 0) * 16 + 16}px`,
@@ -78,6 +81,7 @@ function SidebarLink({
         as={to ? undefined : href ? "a" : "div"}
         href={href}
         className={className}
+        ref={ref}
       >
         {icon && <IconWrapper>{icon}</IconWrapper>}
         <Label>{label}</Label>
@@ -174,4 +178,4 @@ const Label = styled.div`
   line-height: 1.6;
 `;
 
-export default withRouter(withTheme(SidebarLink));
+export default withRouter(withTheme(React.forwardRef(SidebarLink)));

app/scenes/Search/Search.js

@@ -6,7 +6,6 @@ import { observer, inject } from "mobx-react";
 import { PlusIcon } from "outline-icons";
 import queryString from "query-string";
 import * as React from "react";
-import ReactDOM from "react-dom";
 import { withTranslation, Trans, type TFunction } from "react-i18next";
 import keydown from "react-keydown";
 import { withRouter, Link } from "react-router-dom";
@@ -103,8 +102,9 @@ class Search extends React.Component<Props> {
     if (ev.key === "ArrowDown") {
       ev.preventDefault();
       if (this.firstDocument) {
-        const element = ReactDOM.findDOMNode(this.firstDocument);
-        if (element instanceof HTMLElement) element.focus();
+        if (this.firstDocument instanceof HTMLElement) {
+          this.firstDocument.focus();
+        }
       }
     }
   };