From d1aa23d22ee828ed0d5bd756e6183a14dbe5e118 Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Tue, 27 Oct 2020 07:52:29 -0700
Subject: [PATCH] landscape: allow autofocusing ship select

Fixes #3804
---
 pkg/interface/src/views/components/DropdownSearch.tsx         | 4 +++-
 pkg/interface/src/views/components/ShipSearch.tsx             | 2 ++
 .../src/views/landscape/components/InvitePopover.tsx          | 1 +
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/pkg/interface/src/views/components/DropdownSearch.tsx b/pkg/interface/src/views/components/DropdownSearch.tsx
index 743ffc740..a873bae26 100644
--- a/pkg/interface/src/views/components/DropdownSearch.tsx
+++ b/pkg/interface/src/views/components/DropdownSearch.tsx
@@ -22,6 +22,7 @@ interface RenderChoiceProps<C> {
 }
 
 interface DropdownSearchProps<C> {
+  autoFocus?: boolean;
   label?: string;
   id: string;
   // check if entry is exact match
@@ -51,7 +52,7 @@ interface DropdownSearchProps<C> {
 
 export function DropdownSearch<C>(props: DropdownSearchProps<C>) {
   const textarea = useRef<HTMLTextAreaElement>();
-  const { candidates, getKey, caption } = props;
+  const { candidates, getKey, caption, autoFocus } = props;
 
   const [query, setQuery] = useState("");
 
@@ -127,6 +128,7 @@ export function DropdownSearch<C>(props: DropdownSearchProps<C>) {
           value={query}
           autocomplete="off"
           placeholder={props.placeholder || ""}
+          autoFocus={autoFocus}
         />
       )}
       {dropdown.length !== 0 && query.length !== 0 && (
diff --git a/pkg/interface/src/views/components/ShipSearch.tsx b/pkg/interface/src/views/components/ShipSearch.tsx
index b58188ffc..3bcbead16 100644
--- a/pkg/interface/src/views/components/ShipSearch.tsx
+++ b/pkg/interface/src/views/components/ShipSearch.tsx
@@ -12,6 +12,7 @@ import { Rolodex, Groups } from "~/types";
 import { HoverBox } from "./HoverBox";
 
 interface InviteSearchProps {
+  autoFocus?: boolean;
   disabled?: boolean;
   label?: string;
   caption?: string;
@@ -138,6 +139,7 @@ export function ShipSearch(props: InviteSearchProps) {
         renderChoice={({ candidate, onRemove }) => null}
         value={undefined}
         error={error}
+        autoFocus={props.autoFocus}
       />
       <Row minHeight="34px" flexWrap="wrap">
         {value.map((s) => (
diff --git a/pkg/interface/src/views/landscape/components/InvitePopover.tsx b/pkg/interface/src/views/landscape/components/InvitePopover.tsx
index 2b8ae7b9a..2aac6d151 100644
--- a/pkg/interface/src/views/landscape/components/InvitePopover.tsx
+++ b/pkg/interface/src/views/landscape/components/InvitePopover.tsx
@@ -110,6 +110,7 @@ export function InvitePopover(props: InvitePopoverProps) {
                     id="ships"
                     label=""
                     maxLength={props.workspace.type === 'home' ? 1 : undefined}
+                    autoFocus
                   />
                   <FormError message="Failed to invite" />
                   {/* <ChipInput