@fluid-topics/ft-text-field 1.1.43 → 1.1.44

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

@@ -16,6 +16,7 @@ export declare class FtTextField extends FtTextField_base implements FtTextField
     outlined: boolean;
     disabled: boolean;
     error: boolean;
+    fixedMenuPosition: boolean;
     prefix: string | null;
     icon?: string;
     passwordHiddenIcon: string;
@@ -26,7 +27,6 @@ export declare class FtTextField extends FtTextField_base implements FtTextField
     password: boolean;
     focused: boolean;
     hidePassword: boolean;
-    suggestionsOnTop: boolean;
     hideSuggestions: boolean;
     visibleSuggestions: FtTextFieldSuggestion[];
     mainPanel?: HTMLElement;

package/build/ft-text-field.js

@@ -14,6 +14,7 @@ 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 { computeOffsetPosition } from "@fluid-topics/ft-wc-utils/build/floating";
 class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
     constructor() {
         super(...arguments);
@@ -22,6 +23,7 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
         this.outlined = false;
         this.disabled = false;
         this.error = false;
+        this.fixedMenuPosition = false;
         this.prefix = null;
         this.passwordHiddenIcon = FtIcons.EYE_SLASH;
         this.passwordRevealedIcon = FtIcons.EYE;
@@ -29,7 +31,6 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
         this.password = false;
         this.focused = false;
         this.hidePassword = true;
-        this.suggestionsOnTop = false;
         this.hideSuggestions = false;
         this.visibleSuggestions = [];
     }
@@ -66,6 +67,7 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
             "ft-text-field--has-value": !!this.value,
             "ft-text-field--with-label": !!this.label,
             "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.visibleSuggestions.length === 0 || this.hideSuggestions,
             "ft-text-field--raised-label": this.focused || this.value != "",
@@ -103,7 +105,7 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
                                @focus=${this.onFocus}/>
                         ${(this.renderIcon())}
                     </div>
-                    <div class="ft-text-field--suggestions ${this.suggestionsOnTop ? "ft-text-field--suggestions-on-top" : ""}"
+                    <div class="ft-text-field--suggestions"
                          @suggestion-selected=${this.onSuggestionSelected}>
                         <slot @slotchange=${() => this.filterSuggestionsIfNeeded()}></slot>
                     </div>
@@ -157,14 +159,14 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
         }
     }
     contentAvailableCallback(props) {
-        var _a, _b;
         super.contentAvailableCallback(props);
         if (props.has("focused") && !this.hideSuggestions && this.visibleSuggestions.length > 0) {
-            const rect = (_a = this.input) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            const suggestRect = (_b = this.suggestionsContainer) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
-            if (rect && suggestRect) {
-                this.suggestionsOnTop = rect.bottom + suggestRect.height > window.innerHeight && rect.top - suggestRect.height > 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`;
+            });
         }
     }
     setValue(newValue, fireChangeEvent = false) {
@@ -258,6 +260,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtTextField.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtTextField.prototype, "fixedMenuPosition", void 0);
 __decorate([
     property()
 ], FtTextField.prototype, "prefix", void 0);
@@ -288,9 +293,6 @@ __decorate([
 __decorate([
     state()
 ], FtTextField.prototype, "hidePassword", void 0);
-__decorate([
-    state()
-], FtTextField.prototype, "suggestionsOnTop", void 0);
 __decorate([
     state()
 ], FtTextField.prototype, "hideSuggestions", void 0);