@fluid-topics/ft-text-field 1.2.24 → 1.2.25

package/build/ft-text-field.d.ts

@@ -54,5 +54,6 @@ export declare class FtTextField extends FtTextField_base implements FtTextField
     private onFocus;
     private onMainPanelBlur;
     private togglePasswordVisibility;
+    private setSuggestionPosition;
 }
 export {};

package/build/ft-text-field.js

@@ -8,14 +8,13 @@ import { html, nothing } from "lit";
 import { property, query, queryAssignedElements, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { FtLitElement, noTextInputDefaultClearButton, toFtFormComponent } from "@fluid-topics/ft-wc-utils";
+import { computeFlipOffsetPosition, FtLitElement, noTextInputDefaultClearButton, toFtFormComponent } from "@fluid-topics/ft-wc-utils";
 import { FtTypography, FtTypographyBody1 } from "@fluid-topics/ft-typography";
 import { FtInputLabel } from "@fluid-topics/ft-input-label";
 import { FtRipple } from "@fluid-topics/ft-ripple";
 import { FtIcon, FtIcons } from "@fluid-topics/ft-icon";
 import { styles } from "./ft-text-field.styles";
 import { FtTextFieldSuggestion } from "./ft-text-field-suggestion";
-import { computeOffsetPosition } from "@fluid-topics/ft-wc-utils/build/floating";
 class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
     /*
      * We prevent lit from creating setter and getter to differentiate
@@ -71,7 +70,7 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
             "ft-text-field--in-error": this.error,
             "ft-text-field--fixed": this.fixedMenuPosition,
             "ft-text-field--with-prefix": !!this.prefix,
-            "ft-text-field--hide-suggestions": this.hideSuggestions,
+            "ft-text-field--hide-suggestions": this.hideSuggestions || this.visibleSuggestions.length == 0,
             "ft-text-field--raised-label": this.focused || this.value != "",
             "ft-text-field--with-icon": !!this.icon,
             "ft-text-field--with-password": this.password
@@ -112,7 +111,7 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
                     <div class="ft-text-field--suggestions"
                          @suggestion-selected=${this.onSuggestionSelected}>
                         <slot @slotchange=${() => this.filterSuggestionsIfNeeded()}></slot>
-                        ${this.filterSuggestions && this.value ? html `
+                        ${this.filterSuggestions && (this.value && this.value != "") ? html `
                             <ft-text-field-suggestion class="ft-text-field-suggestion--new-value" helper="${this.suggestionsHelper}">
                                 ${this.value}
                             </ft-text-field-suggestion>
@@ -157,6 +156,9 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
         if (props.has("dispatchedValue") && props.get("dispatchedValue") != null) {
             this.hideSuggestions = true;
         }
+        if (props.has("visibleSuggestions") && this.visibleSuggestions.length) {
+            this.setSuggestionPosition();
+        }
     }
     filterSuggestionsIfNeeded() {
         if (this.filterSuggestions) {
@@ -169,16 +171,12 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
         if (this.newValueSuggestion) {
             this.visibleSuggestions = [...this.visibleSuggestions, this.newValueSuggestion];
         }
+        this.hideSuggestions = this.visibleSuggestions.length <= 0;
     }
     contentAvailableCallback(props) {
         super.contentAvailableCallback(props);
         if (props.has("focused") && !this.hideSuggestions && this.visibleSuggestions.length > 0) {
-            this.suggestionsContainer.style.width = this.mainPanel.getBoundingClientRect().width + "px";
-            computeOffsetPosition(this.mainPanel, this.suggestionsContainer, "bottom")
-                .then(({ x, y }) => {
-                this.suggestionsContainer.style.left = `${x}px`;
-                this.suggestionsContainer.style.top = `${y}px`;
-            });
+            this.setSuggestionPosition();
         }
     }
     setValue(newValue, fireChangeEvent = false) {
@@ -239,6 +237,15 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
     togglePasswordVisibility() {
         this.hidePassword = !this.hidePassword;
     }
+    setSuggestionPosition() {
+        this.suggestionsContainer.style.width = this.mainPanel.getBoundingClientRect().width + "px";
+        const fallbackPlacements = ["bottom", "top"];
+        computeFlipOffsetPosition(this.mainPanel, this.suggestionsContainer, "bottom", fallbackPlacements, "fixed", 0)
+            .then(({ x, y }) => {
+            this.suggestionsContainer.style.left = `${x}px`;
+            this.suggestionsContainer.style.top = `${y}px`;
+        });
+    }
 }
 FtTextField.elementDefinitions = {
     "ft-input-label": FtInputLabel,