Fix focus when entering modal dropdown. (#547)

this PR fixes a problem initially solved in #276, unfortunately the
previous approach prevented us from autofocusing on input fields in
modals when opening modals for the first time, as it kept focus on the
background.

packages/vscode-extension/src/webview/components/shared/Button.tsx

@@ -15,6 +15,7 @@ interface ButtonProps {
     type?: "primary" | "secondary";
   };
   className?: string;
+  autoFocus: boolean;
 }
 
 function Button({
@@ -26,9 +27,11 @@ function Button({
   disabled,
   active,
   tooltip,
+  autoFocus,
 }: ButtonProps) {
   const button = (
     <button
+      autoFocus={autoFocus}
       onClick={onClick}
       disabled={disabled}
       className={classNames(

packages/vscode-extension/src/webview/components/shared/Modal.tsx

@@ -22,10 +22,7 @@ export default function Modal({ title, component, open, setOpen, headerShown }:
     <Dialog.Root open={open}>
       <Dialog.Portal>
         <Dialog.Overlay className="modal-overlay" onClick={close} />
-        <Dialog.Content
-          className="modal-content"
-          onEscapeKeyDown={close}
-          onOpenAutoFocus={preventDefault}>
+        <Dialog.Content className="modal-content" onEscapeKeyDown={close}>
           {headerShown && <Dialog.Title className="modal-title">{title}</Dialog.Title>}
 
           <div className="modal-content-container">{component}</div>

packages/vscode-extension/src/webview/views/ManageDevicesView.tsx

@@ -113,7 +113,7 @@ function ManageDevicesView() {
           ))}
         </>
       )}
-      <Button className="create-button" onClick={() => setCreateDeviceViewOpen(true)}>
+      <Button autoFocus className="create-button" onClick={() => setCreateDeviceViewOpen(true)}>
         <span className="codicon codicon-add" />
         <div className="create-button-text">Create new device</div>
       </Button>