diff --git a/packages/apsara-ui/src/Combobox/Combobox.stories.tsx b/packages/apsara-ui/src/Combobox/Combobox.stories.tsx
index 38c07f26..3df386da 100644
--- a/packages/apsara-ui/src/Combobox/Combobox.stories.tsx
+++ b/packages/apsara-ui/src/Combobox/Combobox.stories.tsx
@@ -1,14 +1,17 @@
-import React from "react";
-import Combobox from "./Combobox";
+import React, { useState } from "react";
import { SelectProps } from "rc-select";
+import Combobox from "./Combobox";
+
export default {
title: "General/Combobox",
component: Combobox,
argTypes: { mode: { control: "select", options: ["multiple", "tags", "combobox", undefined] } },
};
-const options = [
+
+type SelectOptionType = SelectProps['options'];
+const options: SelectOptionType = [
{ value: "2", label: "pilotdata-integration:bq_smoke_test_json_insert_all_dataset - Bigquery Dataset" },
{ value: "3", label: "Ford Raptor" },
{ value: "4", label: "Ferrari Testarossa" },
@@ -25,7 +28,6 @@ const options = [
const Template = (args: SelectProps) => ;
export const MultiSelectWithSearch = Template.bind({});
-
MultiSelectWithSearch.args = {
placeholder: "Please Select",
options: options,
@@ -35,3 +37,25 @@ MultiSelectWithSearch.args = {
mode: "multiple",
optionFilterProp: "label",
};
+
+export const WithAsyncOptions = () => {
+ const [isSearching, setIsSearching] = useState(false);
+ const [opts, setOpts] = useState();
+
+ const search = (q: string) => {
+ setIsSearching(true);
+ setOpts(undefined);
+ setTimeout(() => {
+ setOpts(options.filter((o) => (o.label as string).includes(q)))
+ setIsSearching(false);
+ }, 1000);
+ }
+
+ return
+};
diff --git a/packages/apsara-ui/src/Combobox/Combobox.tsx b/packages/apsara-ui/src/Combobox/Combobox.tsx
index f5ba8af8..4ad548f5 100644
--- a/packages/apsara-ui/src/Combobox/Combobox.tsx
+++ b/packages/apsara-ui/src/Combobox/Combobox.tsx
@@ -13,6 +13,13 @@ const notFoundContent = (
);
+const loadingContent = (
+
+
+ Loading
+
+);
+
const Combobox = ({
options,
mode,
@@ -65,7 +72,7 @@ const Combobox = ({
return (