samples & fix for combobox & single select

Author: BF150

packages/components/src/components/combobox/shadow.tsx

@@ -155,7 +155,11 @@ export class KolCombobox implements ComboboxAPI, FocusableElement {
 		}
 	}
 
-	private setFilteredSuggestionsByQuery(query: string) {
+	private setFilteredSuggestionsByQuery(query: string | undefined) {
+		if (!query) {
+			return;
+		}
+
 		if (query.trim() === '') {
 			this._filteredSuggestions = [...this.state._suggestions];
 		} else {
@@ -630,6 +634,7 @@ export class KolCombobox implements ComboboxAPI, FocusableElement {
 	public validateSuggestions(value?: SuggestionsPropType): void {
 		this.controller.validateSuggestions(value);
 		this._filteredSuggestions = value;
+		this.setFilteredSuggestionsByQuery(this._value);
 	}
 
 	@Watch('_hasClearButton')

packages/components/src/components/single-select/shadow.tsx

@@ -206,7 +206,11 @@ export class KolSingleSelect implements SingleSelectAPI, FocusableElement {
 		}
 	}
 
-	private setFilteredOptionsByQuery(query: string) {
+	private setFilteredOptionsByQuery(query: string | undefined) {
+		if (!query) {
+			return;
+		}
+
 		if (query?.trim() === '') {
 			this._filteredOptions = [...this.state._options];
 		} else if (Array.isArray(this.state._options) && this.state._options.length > 0 && query.length > 0) {
@@ -721,7 +725,7 @@ export class KolSingleSelect implements SingleSelectAPI, FocusableElement {
 	public validateOptions(value?: OptionsPropType): void {
 		this.controller.validateOptions(value);
 		this._filteredOptions = value;
-		this.updateInputValue(this._value);
+		this.setFilteredOptionsByQuery(this._inputValue);
 	}
 
 	@Watch('_required')

packages/samples/react/src/components/combobox/lazy-loaded.tsx

@@ -0,0 +1,56 @@
+import { SuggestionsPropType } from '@public-ui/components';
+import { KolCombobox, KolSpin } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React, { useState } from 'react';
+import { COUNTRY_SUGGESTIONS } from '../../shares/country';
+import { SampleDescription } from '../SampleDescription';
+
+const LoadingOverlayFC: FC<{
+	show: boolean;
+}> = ({ show }) => {
+	if (show) {
+		return (
+			<div className="loading-overlay">
+				<KolSpin
+					_label="loading"
+					_show={show}
+					_variant="cycle"
+					style={{
+						backgroundColor: 'transparent',
+					}}
+				/>
+			</div>
+		);
+	} else {
+		return null;
+	}
+};
+
+export const ComboboxLazyLoaded: FC = () => {
+	const [suggestions, setSuggestions] = useState<SuggestionsPropType>([]);
+	const [loading, setLoading] = useState<boolean>(false);
+
+	function loadCountries() {
+		if (suggestions.length > 0) {
+			return;
+		}
+		setLoading(true);
+		setTimeout(() => {
+			setSuggestions(COUNTRY_SUGGESTIONS);
+			setLoading(false);
+		}, 5000);
+	}
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This combobox loads its list of countries 5 seconds after the first input of the user to simulate a call to the server.</p>
+			</SampleDescription>
+
+			<section className="w-full relative p-3">
+				<KolCombobox _label="Lazy loaded countries" _suggestions={suggestions} onInput={() => loadCountries()} />
+				<LoadingOverlayFC show={loading} />
+			</section>
+		</>
+	);
+};

packages/samples/react/src/components/combobox/routes.ts

@@ -1,10 +1,12 @@
 import type { Routes } from '../../shares/types';
 import { ComboboxBasic } from './basic';
 import { ComboboxHtml } from './html';
+import { ComboboxLazyLoaded } from './lazy-loaded';
 
 export const COMBOBOX_ROUTES: Routes = {
 	combobox: {
 		basic: ComboboxBasic,
 		html: ComboboxHtml,
+		'lazy-loaded': ComboboxLazyLoaded,
 	},
 };

packages/samples/react/src/components/single-select/lazy-loaded.tsx

@@ -0,0 +1,56 @@
+import type { Option, StencilUnknown } from '@public-ui/components';
+import { KolSingleSelect, KolSpin } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React, { useState } from 'react';
+import { COUNTRY_OPTIONS } from '../../shares/country';
+import { SampleDescription } from '../SampleDescription';
+
+const LoadingOverlayFC: FC<{
+	show: boolean;
+}> = ({ show }) => {
+	if (show) {
+		return (
+			<div className="loading-overlay">
+				<KolSpin
+					_label="loading"
+					_show={show}
+					_variant="cycle"
+					style={{
+						backgroundColor: 'transparent',
+					}}
+				/>
+			</div>
+		);
+	} else {
+		return null;
+	}
+};
+
+export const SingleSelectLazyLoaded: FC = () => {
+	const [suggestions, setSuggestions] = useState<Option<StencilUnknown>[]>([]);
+	const [loading, setLoading] = useState<boolean>(false);
+
+	function loadCountries() {
+		if (suggestions.length > 0) {
+			return;
+		}
+		setLoading(true);
+		setTimeout(() => {
+			setSuggestions(COUNTRY_OPTIONS as Option<StencilUnknown>[]);
+			setLoading(false);
+		}, 5000);
+	}
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This combobox loads its list of countries 5 seconds after the first input of the user to simulate a call to the server.</p>
+			</SampleDescription>
+
+			<section className="w-full relative p-3">
+				<KolSingleSelect _label="Lazy loaded countries" _options={suggestions} onInput={() => loadCountries()} />
+				<LoadingOverlayFC show={loading} />
+			</section>
+		</>
+	);
+};

packages/samples/react/src/components/single-select/routes.ts

@@ -1,8 +1,10 @@
 import type { Routes } from '../../shares/types';
 import { SingleSelectBasic } from './basic';
+import { SingleSelectLazyLoaded } from './lazy-loaded';
 
 export const SINGLE_SELECT_ROUTES: Routes = {
 	'single-select': {
 		basic: SingleSelectBasic,
+		'lazy-loaded': SingleSelectLazyLoaded,
 	},
 };