From 81a8131ad1a4797193d2f44488b65515ca7732bc Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Fri, 20 Dec 2024 14:48:33 +0200
Subject: [PATCH] feat: enhance AutocompleteInput with autoFocus

---
 .../containers/main/actions/action-modal/index.tsx    |  2 +-
 .../auto-complete-input/index.tsx                     | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/webapp/containers/main/actions/action-modal/index.tsx b/frontend/webapp/containers/main/actions/action-modal/index.tsx
index 6d97d5ea7..aa33fde30 100644
--- a/frontend/webapp/containers/main/actions/action-modal/index.tsx
+++ b/frontend/webapp/containers/main/actions/action-modal/index.tsx
@@ -60,7 +60,7 @@ export const ActionModal: React.FC<Props> = ({ isOpen, onClose }) => {
     >
       <ModalBody>
         <SectionTitle title='Select Action' description='Select an action to modify telemetry data before it`s sent to destinations. Choose an action type and configure its details.' />
-        <AutocompleteInput options={ACTION_OPTIONS} selectedOption={selectedItem} onOptionSelect={handleSelect} style={{ marginTop: '24px' }} />
+        <AutocompleteInput options={ACTION_OPTIONS} selectedOption={selectedItem} onOptionSelect={handleSelect} style={{ marginTop: '24px' }} autoFocus />
 
         {!!selectedItem?.type ? (
           <div>
diff --git a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
index 84c21ca58..42ad31266 100644
--- a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
+++ b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, type ChangeEvent, type KeyboardEvent, type FC } from 'react';
+import React, { useState, type ChangeEvent, type KeyboardEvent, type FC, type InputHTMLAttributes } from 'react';
 import { SVG } from '@/assets';
 import { Text } from '../text';
 import styled from 'styled-components';
@@ -11,7 +11,7 @@ export interface Option {
   items?: Option[]; // For handling a list of items
 }
 
-interface Props {
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
   options: Option[];
   placeholder?: string;
   selectedOption?: Option;
@@ -34,7 +34,7 @@ const filterOptions = (optionsList: Option[], input: string): Option[] => {
   }, []);
 };
 
-export const AutocompleteInput: FC<Props> = ({ placeholder = 'Type to search...', options, selectedOption, onOptionSelect, style, disabled }) => {
+export const AutocompleteInput: FC<Props> = ({ placeholder = 'Type to search...', options, selectedOption, onOptionSelect, style, disabled, ...props }) => {
   const [query, setQuery] = useState(selectedOption?.label || '');
   const [filteredOptions, setFilteredOptions] = useState<Option[]>(filterOptions(options, ''));
   const [showOptions, setShowOptions] = useState(false);
@@ -99,6 +99,7 @@ export const AutocompleteInput: FC<Props> = ({ placeholder = 'Type to search...'
           disabled={disabled}
           onBlur={() => !disabled && setShowOptions(false)}
           onFocus={() => !disabled && setShowOptions(true)}
+          {...props}
         />
       </InputWrapper>
 
@@ -199,10 +200,10 @@ const StyledInput = styled.input`
 
 const OptionsList = styled.ul`
   position: absolute;
-  max-height: 348px;
+  max-height: 500px;
   top: 32px;
   border-radius: 24px;
-  width: calc(100% - 24px);
+  width: calc(100% - 32px);
   overflow-y: auto;
   background-color: ${({ theme }) => theme.colors.dropdown_bg};
   border: 1px solid ${({ theme }) => theme.colors.border};