FLOW-1477 scroll to search keyword in f-log (#253)

packages/flow-core/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.9.5] - 2024-03-21
+
+### Bug Fixes
+
+- `f-search` & `f-suggest` overlay got displayed even we don't have results or suggestions.
+
 ## [2.9.4] - 2024-03-20
 
 ### Improvements

packages/flow-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-core",
-  "version": "2.9.4",
+  "version": "2.9.5",
   "description": "Core package of flow design system",
   "module": "dist/flow-core.es.js",
   "main": "dist/flow-core.cjs.js",

packages/flow-core/src/components/f-search/f-search.ts

@@ -10,6 +10,7 @@ import { FSuggest } from "../f-suggest/f-suggest";
 import { FIconButton } from "../f-icon-button/f-icon-button";
 import { flowElement } from "./../../utils";
 import { injectCss } from "@ollion/flow-core-config";
+import { ifDefined } from "lit-html/directives/if-defined.js";
 injectCss("f-search", globalStyle);
 
 export type FSearchState = "primary" | "default" | "success" | "warning" | "danger";
@@ -385,7 +386,7 @@ export class FSearch extends FRoot {
 						class=${this.applyStyling}
 						data-suggest="search"
 						aria-label="Input of ${this.getAttribute("aria-label")}"
-						data-qa-element-id=${this.getAttribute("data-qa-element-id")}
+						data-qa-element-id=${ifDefined(this.getAttribute("data-qa-element-id") ?? undefined)}
 						.value=${this.value}
 						.variant=${this.variant}
 						.category=${this.category}

packages/flow-core/src/components/f-suggest/f-suggest.ts

@@ -184,7 +184,7 @@ export class FSuggest extends FRoot {
 	 * popover element reference
 	 */
 	@query("f-popover")
-	popOverElement!: FPopover;
+	popOverElement?: FPopover;
 
 	@query(".f-select-options-clickable")
 	FSelectOptions?: FDiv;
@@ -223,13 +223,13 @@ export class FSuggest extends FRoot {
 		if (wait) {
 			await new Promise(resolve => setTimeout(resolve, 200));
 		}
-		this.popOverElement.open = false;
+		if (this.popOverElement) this.popOverElement.open = false;
 		this.currentIndex = -1;
 		this.currentCategoryIndex = 0;
 		this.setAttribute("aria-expanded", "false");
 	}
 	handleFocus() {
-		if (!this.disableSuggestions) {
+		if (!this.disableSuggestions && this.popOverElement) {
 			this.popOverElement.target = this.fInput.inputWrapperElement;
 			this.popOverElement.offset = {
 				mainAxis: 4
@@ -290,7 +290,7 @@ export class FSuggest extends FRoot {
 				break;
 			case "Escape":
 				event.preventDefault();
-				this.popOverElement.open = false;
+				if (this.popOverElement) this.popOverElement.open = false;
 				break;
 		}
 	}
@@ -434,20 +434,20 @@ export class FSuggest extends FRoot {
 				.variant=${this.variant}
 				.category=${this.category}
 				.placeholder=${this.placeholder}
-				aria-placeholder="${this.placeholder}"
-				aria-label="${ifDefined(this.getAttribute("aria-label"))}"
+				aria-placeholder="${ifDefined(this.placeholder)}"
+				aria-label="${ifDefined(this.getAttribute("aria-label") ?? undefined)}"
 				@input=${this.handleInput}
 				@focus=${this.handleFocus}
 				@blur=${this.handleBlur}
 				@keydown=${this.handleKeyDown}
 				type="text"
-				data-qa-element-id=${this.getAttribute("data-qa-element-id")}
-				icon-left=${this.iconLeft}
-				icon-right=${this.iconRight}
-				prefix=${this.prefix}
-				suffix=${this.suffix}
-				state=${this.state}
-				.maxLength=${ifDefined(this.maxLength)}
+				data-qa-element-id=${ifDefined(this.getAttribute("data-qa-element-id") ?? undefined)}
+				icon-left=${ifDefined(this.iconLeft)}
+				icon-right=${ifDefined(this.iconRight)}
+				prefix=${ifDefined(this.prefix ?? undefined)}
+				suffix=${ifDefined(this.suffix)}
+				state=${ifDefined(this.state)}
+				.maxLength=${this.maxLength}
 				?loading=${this.loading}
 				?disabled=${this.disabled}
 				.clear=${this.clear}
@@ -462,16 +462,27 @@ export class FSuggest extends FRoot {
 							<f-div slot="icon-tooltip"><slot name="icon-tooltip"></slot></f-div
 							><f-div slot="subtitle"><slot name="subtitle"></slot></f-div>`}
 			</f-input>
-			<f-popover .overlay=${false} .placement=${"bottom-start"} class="f-suggest-popover">
-				<f-div direction="column" state="secondary">
-					${this.filteredSuggestions && this.filteredSuggestionsLength > 0
-						? this.getSuggestionHtml(this.filteredSuggestions)
-						: html`<slot name="no-data"></slot>`}
-				</f-div>
-			</f-popover>
+			${!this.isSuggesstionsEmpty()
+				? html` <f-popover .overlay=${false} .placement=${"bottom-start"} class="f-suggest-popover">
+						<f-div direction="column" state="secondary">
+							${this.filteredSuggestions && this.filteredSuggestionsLength > 0
+								? this.getSuggestionHtml(this.filteredSuggestions)
+								: html`<slot name="no-data"></slot>`}
+						</f-div>
+				  </f-popover>`
+				: nothing}
 		</f-div>`;
 	}
 
+	isSuggesstionsEmpty() {
+		if (Array.isArray(this.suggestions)) {
+			return this.suggestions.length === 0;
+		} else if (typeof this.suggestions === "object") {
+			return Object.keys(this.suggestions).length == 0;
+		}
+		return true;
+	}
+
 	getSuggestionHtml(suggestions: FSuggestSuggestions) {
 		if (this.isStringArraySuggestions && !this.isTemplateArraySuggestions) {
 			if (this.anySuggestions) {

packages/flow-log/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.0.4] - 2024-03-21
+
+### Bug Fixes
+
+- Scroll to searchKeyword when available.
+
 ## [2.0.3] - 2024-02-12
 
 ### Improvements

packages/flow-log/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-log",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Code editor component for flow library",
   "module": "dist/flow-log.es.js",
   "main": "dist/flow-log.es.js",

packages/flow-log/src/components/f-log/f-log.ts

@@ -221,7 +221,7 @@ export class FLog extends FRoot {
 				cancelIdleCallback(this.requestIdleId);
 			}
 			if (this.searchKeyword) {
-				this.highlightText(this.searchKeyword, false);
+				this.highlightText(this.searchKeyword, true);
 			}
 		}
 	}

stories/flow-core/f-search.stories.ts

@@ -25,15 +25,15 @@ export const Playground = {
 			<f-div padding="large">
 				<f-search
 					aria-label="Search Input"
-					value=${args.value}
-					selected-scope=${args["selected-scope"]}
+					.value=${args.value}
+					.selectedScope=${args["selected-scope"]}
 					.variant=${args.variant}
 					.category=${args.category}
 					.placeholder=${args.placeholder}
-					.result=${args.result}
+					.result=${[]}
 					.scope=${args.scope}
 					@input=${handleInput}
-					state=${args.state}
+					.state=${args.state}
 					?disabled=${args.disabled}
 					?clear=${args.clear}
 					?search-button=${args["search-button"]}