refactor: improve sheet flow management

apps/client/src/common/api/constants.ts

@@ -11,6 +11,7 @@ export const CUSTOM_VIEWS = ['customViews'];
 export const PROJECT_DATA = ['project'];
 export const PROJECT_LIST = ['projectList'];
 export const PROJECT_RUNDOWNS = ['projectRundowns'];
+export const RUNDOWN = ['rundown'];
 export const CURRENT_RUNDOWN_QUERY_KEY = ['rundown', 'current'];
 export const getRundownQueryKey = (rundownId: string) => ['rundown', rundownId];
 export const RUNTIME = ['runtimeStore'];

apps/client/src/common/components/autocomplete-input/AutocompleteInput.tsx

@@ -16,6 +16,7 @@ export interface AutocompleteInputProps extends Omit<InputProps, 'value' | 'defa
   emptyLabel?: string;
   trailingElement?: (option: string) => ReactNode;
   inputRef?: Ref<HTMLInputElement>;
+  openOnFocus?: boolean;
 }
 
 export default function AutocompleteInput({
@@ -27,6 +28,7 @@ export default function AutocompleteInput({
   inputRef,
   onValueChange,
   options,
+  openOnFocus = false,
   trailingElement,
   value,
   variant = 'subtle',
@@ -34,6 +36,7 @@ export default function AutocompleteInput({
 }: AutocompleteInputProps) {
   const internalInputRef = useRef<HTMLInputElement | null>(null);
   const [open, setOpen] = useState(false);
+  const { onFocus, ...restInputProps } = inputProps;
 
   const handleInputRef = (node: HTMLInputElement | null) => {
     internalInputRef.current = node;
@@ -81,6 +84,12 @@ export default function AutocompleteInput({
     >
       <BaseAutocomplete.Input
         ref={handleInputRef}
+        onFocus={(event) => {
+          onFocus?.(event);
+          if (openOnFocus) {
+            setOpen(true);
+          }
+        }}
         className={cx([
           inputStyles.input,
           inputStyles[variant],
@@ -88,7 +97,7 @@ export default function AutocompleteInput({
           fluid && inputStyles.fluid,
           className,
         ])}
-        {...inputProps}
+        {...restInputProps}
       />
       <BaseAutocomplete.Portal>
         <BaseAutocomplete.Positioner side='bottom' align='start' className={styles.positioner}>