diff --git a/packages/flow-core/CHANGELOG.md b/packages/flow-core/CHANGELOG.md
index 2f2180b99..b501294ff 100644
--- a/packages/flow-core/CHANGELOG.md
+++ b/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
diff --git a/packages/flow-core/package.json b/packages/flow-core/package.json
index db7db04b8..ae34a05fd 100644
--- a/packages/flow-core/package.json
+++ b/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",
diff --git a/packages/flow-core/src/components/f-search/f-search.ts b/packages/flow-core/src/components/f-search/f-search.ts
index b487e7647..62654cdc9 100644
--- a/packages/flow-core/src/components/f-search/f-search.ts
+++ b/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}
diff --git a/packages/flow-core/src/components/f-suggest/f-suggest.ts b/packages/flow-core/src/components/f-suggest/f-suggest.ts
index 5faf00b37..6204f31c5 100644
--- a/packages/flow-core/src/components/f-suggest/f-suggest.ts
+++ b/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 {
`}
-
-
- ${this.filteredSuggestions && this.filteredSuggestionsLength > 0
- ? this.getSuggestionHtml(this.filteredSuggestions)
- : html``}
-
-
+ ${!this.isSuggesstionsEmpty()
+ ? html`
+
+ ${this.filteredSuggestions && this.filteredSuggestionsLength > 0
+ ? this.getSuggestionHtml(this.filteredSuggestions)
+ : html``}
+
+ `
+ : nothing}
`;
}
+ 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) {
diff --git a/packages/flow-log/CHANGELOG.md b/packages/flow-log/CHANGELOG.md
index e0de02359..22c79f7c2 100644
--- a/packages/flow-log/CHANGELOG.md
+++ b/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
diff --git a/packages/flow-log/package.json b/packages/flow-log/package.json
index dcdccfdae..b077096d5 100644
--- a/packages/flow-log/package.json
+++ b/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",
diff --git a/packages/flow-log/src/components/f-log/f-log.ts b/packages/flow-log/src/components/f-log/f-log.ts
index 6ce58391d..b2ab7a407 100644
--- a/packages/flow-log/src/components/f-log/f-log.ts
+++ b/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);
}
}
}
diff --git a/stories/flow-core/f-search.stories.ts b/stories/flow-core/f-search.stories.ts
index 25deea662..9caad4130 100644
--- a/stories/flow-core/f-search.stories.ts
+++ b/stories/flow-core/f-search.stories.ts
@@ -25,15 +25,15 @@ export const Playground = {