diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SheetsDropdown.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SheetsDropdown.tsx index 3dc82d04e..cc6702895 100644 --- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SheetsDropdown.tsx +++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SheetsDropdown.tsx @@ -1,3 +1,4 @@ +import { Input } from '@chakra-ui/react' import { SearchableDropdown } from 'components/shared/SearchableDropdown' import { useMemo } from 'react' import { Sheet } from 'services/integrations' @@ -25,13 +26,15 @@ export const SheetsDropdown = ({ const id = sheets?.find((s) => s.name === name)?.id if (isDefined(id)) onSelectSheetId(id) } + + if (isLoading) return + if (!sheets) return return ( s.name)} onValueChange={handleSpreadsheetSelect} placeholder={'Select the sheet'} - isLoading={isLoading} /> ) } diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SpreadsheetDropdown.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SpreadsheetDropdown.tsx index 63a8f9953..8b6dd5d27 100644 --- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SpreadsheetDropdown.tsx +++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SpreadsheetDropdown.tsx @@ -1,3 +1,4 @@ +import { Input } from '@chakra-ui/react' import { SearchableDropdown } from 'components/shared/SearchableDropdown' import { useMemo } from 'react' import { useSpreadsheets } from 'services/integrations' @@ -23,13 +24,14 @@ export const SpreadsheetsDropdown = ({ const id = spreadsheets?.find((s) => s.name === name)?.id if (id) onSelectSpreadsheetId(id) } + if (isLoading) return + if (!spreadsheets) return return ( s.name)} onValueChange={handleSpreadsheetSelect} placeholder={'Search for spreadsheet'} - isLoading={isLoading} /> ) } diff --git a/apps/builder/components/shared/SearchableDropdown.tsx b/apps/builder/components/shared/SearchableDropdown.tsx index c9d1ac8fe..dce05939f 100644 --- a/apps/builder/components/shared/SearchableDropdown.tsx +++ b/apps/builder/components/shared/SearchableDropdown.tsx @@ -7,7 +7,6 @@ import { Input, PopoverContent, Button, - Text, InputProps, } from '@chakra-ui/react' import { useState, useRef, useEffect, ChangeEvent } from 'react' @@ -17,14 +16,12 @@ type Props = { selectedItem?: string items: string[] onValueChange?: (value: string) => void - isLoading?: boolean } & InputProps export const SearchableDropdown = ({ selectedItem, items, onValueChange, - isLoading = false, ...inputProps }: Props) => { const { onOpen, onClose, isOpen } = useDisclosure() @@ -66,6 +63,7 @@ export const SearchableDropdown = ({ }, [debouncedInputValue]) const onInputChange = (e: ChangeEvent) => { + if (!isOpen) onOpen() setInputValue(e.target.value) if (e.target.value === '') { setFilteredItems([...items.slice(0, 50)]) @@ -111,7 +109,7 @@ export const SearchableDropdown = ({ w="inherit" shadow="lg" > - {filteredItems.length > 0 ? ( + {filteredItems.length > 0 && ( <> {filteredItems.map((item, idx) => { return ( @@ -132,10 +130,6 @@ export const SearchableDropdown = ({ ) })} - ) : ( - - {isLoading ? 'Loading...' : 'Not found.'} - )}