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

closes #2253

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)));