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.'}
-
)}