Production Deploy

vesta/vesta_ui/src/components/about/about-carousel.tsx

@@ -286,9 +286,9 @@ export function _AboutCarousel({ items }: Props) {
                         },
                     }}
                 >
-                    {items.map((item) => {
+                    {items.map((item, index) => {
                         return (
-                            <SwiperSlide key={item.header}>
+                            <SwiperSlide key={item.header} onClick={() => handleClickCarouselIndexIndicator(index)}>
                                 <AboutItem
                                     header={item.header}
                                     body={item.body}

vesta/vesta_ui/src/components/project-explorer/filter-list.tsx

@@ -128,13 +128,22 @@ const OpenCloseToggle = ({open, onClick}:{
   />
 }
 
-const Filter = ({title, highlight, children}:{
+const Filter = ({title, highlight, children, inputRef}:{
   title: string;
   highlight: boolean;
   children: React.ReactNode;
+  inputRef?: React.RefObject<HTMLInputElement | null>;
 }) => {
   const [ active, setActive ] = React.useState(false);
   const [ fold, setFold ] = React.useState(true);
+  const [ doFocus, setDoFocus ] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!fold && doFocus) {
+      inputRef?.current?.focus();
+      setDoFocus(false);
+    }
+  }, [fold, inputRef]);
 
   const { state: { visibleColumns }, toggleColumnVisibility } = React.useContext(ProjectExplorerContext);
 
@@ -154,7 +163,12 @@ const Filter = ({title, highlight, children}:{
       </Box>
       <Box sx={{ width: '76px' }}>
         <ShowHideToggle shown={visible} onClick={ () => toggleColumnVisibility(title) }/>
-        <OpenCloseToggle open={!fold} onClick={ () => setFold(!fold) }/>
+        <OpenCloseToggle open={!fold}
+          onClick={ () => {
+            if (fold) setDoFocus(true);
+            setFold(!fold);
+          }}
+        />
       </Box>
     </Box>
     {
@@ -173,6 +187,7 @@ const BasicFilter = ({title, filter, items, render}:{
   filter: FilterFunction,
   render: (params:any) => any;
 }) => {
+  const inputRef = React.useRef<HTMLInputElement>(null);
   const {
     state: { projectData, filters, filterItemSet },
     createFilter,
@@ -207,13 +222,15 @@ const BasicFilter = ({title, filter, items, render}:{
     }, [filterItemSet]
   );
 
-  return <Filter title={title} highlight={ title in filterItemSet }>
+  return <Filter title={title} highlight={ title in filterItemSet } inputRef={inputRef}>
     <Autocomplete<string>
       size='small'
       multiple
       filterSelectedOptions
       icon={searchDarkIcon}
       options={itemNames}
+      inputRef={inputRef}
+      openOnFocus
       // @ts-ignore
       onChange={(_, value:string[] | null, reason) => {
           if (reason === 'removeOption') return;

vesta/vesta_ui/src/components/searchable-list/controls/autocomplete.tsx

@@ -32,6 +32,7 @@ interface AutocompleteProps<Value> extends UseAutocompleteProps<Value, boolean,
   renderGroup?: (params: _AutocompleteGroupedOption<Value>) => React.ReactNode;
   renderNoResults?: () => React.ReactNode;
   onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+  inputRef?: React.Ref<HTMLInputElement>;
   sx?: SxProps;
   size?: string;
 }
@@ -53,6 +54,9 @@ function Autocomplete<Value>(
     setAnchorEl,
   } = useAutocomplete(props);
 
+  const { ref: inputPropsRef, ...inputProps } = getInputProps();
+  const inputRef = useForkRef(props.inputRef, inputPropsRef);
+
   const rootRef = useForkRef(ref, setAnchorEl);
 
   const renderGroupedOptions = () => {
@@ -153,7 +157,8 @@ function Autocomplete<Value>(
           />
 
           <StyledInput
-            {...getInputProps()}
+            {...inputProps}
+            ref={inputRef}
             placeholder={props.placeholder}
             onKeyDown={props.onKeyDown}
             sx={{