diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor
index fff16c69a2..ffc269cad2 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor
@@ -42,62 +42,80 @@
@if (Multiline && Type is null or BitInputType.Text)
{
-
+
+
+ @if (GhostText.HasValue())
+ {
+
+
+ }
+
}
else
{
-
+
+
+ @if (GhostText.HasValue())
+ {
+
+
+ }
+
@if (ShowClearButton && CurrentValue.HasValue())
{
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs
index b9f2dc1f4c..356e65ef4e 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs
@@ -1,4 +1,4 @@
-using System.Diagnostics.CodeAnalysis;
+using System.Diagnostics.CodeAnalysis;
namespace Bit.BlazorUI;
@@ -9,6 +9,8 @@ public partial class BitTextField : BitTextInputBase
{
private bool _hasFocus;
private string? _oldValue;
+ private string? _oldGhostText;
+ private DotNetObjectReference? _dotnetObj;
private string? _inputMode;
private bool _isPasswordRevealed;
private BitInputType? _elementType;
@@ -98,6 +100,24 @@ public partial class BitTextField : BitTextInputBase
///
[Parameter] public bool FullWidth { get; set; }
+ ///
+ /// The ghost/suggestion text displayed inline after the current cursor position.
+ /// Update this value from outside (e.g. from an AI or autocomplete suggestion) to show a faded
+ /// inline suggestion. The user can accept it by pressing Tab or Enter, or clicking/touching the ghost text.
+ ///
+ [Parameter] public string? GhostText { get; set; }
+
+ ///
+ /// Gets or sets the icon for the reveal password button when password is shown using custom CSS classes for external icon libraries.
+ /// Takes precedence over when both are set.
+ ///
+ [Parameter] public BitIconInfo? HidePasswordIcon { get; set; }
+
+ ///
+ /// The icon name for the reveal password button when password is shown from the built-in Fluent UI icons.
+ ///
+ [Parameter] public string? HidePasswordIconName { get; set; }
+
///
/// Gets or sets the icon to display using custom CSS classes for external icon libraries.
/// Takes precedence over when both are set.
@@ -186,6 +206,13 @@ public partial class BitTextField : BitTextInputBase
///
[Parameter] public EventCallback OnFocusOut { get; set; }
+ ///
+ /// Callback invoked when the ghost text is accepted via Tab, Enter, or click/touch.
+ /// The accepted ghost text string is passed as the argument.
+ /// Use this to clear or update the GhostText parameter after acceptance.
+ ///
+ [Parameter] public EventCallback OnGhostTextAccepted { get; set; }
+
///
/// Callback for when a keyboard key is pressed
///
@@ -196,6 +223,12 @@ public partial class BitTextField : BitTextInputBase
///
[Parameter] public EventCallback OnKeyUp { get; set; }
+ ///
+ /// Enables permanent ghost mode that forces the scrollbar-gutter to always be present, preventing layout shift of the ghost text rendering.
+ ///
+ [Parameter, ResetClassBuilder]
+ public bool PermanentGhost { get; set; }
+
///
/// Input placeholder text.
///
@@ -239,17 +272,6 @@ public partial class BitTextField : BitTextInputBase
///
[Parameter] public string? RevealPasswordIconName { get; set; }
- ///
- /// Gets or sets the icon for the reveal password button when password is shown using custom CSS classes for external icon libraries.
- /// Takes precedence over when both are set.
- ///
- [Parameter] public BitIconInfo? HidePasswordIcon { get; set; }
-
- ///
- /// The icon name for the reveal password button when password is shown from the built-in Fluent UI icons.
- ///
- [Parameter] public string? HidePasswordIconName { get; set; }
-
///
/// For multiline text, Number of rows.
///
@@ -296,6 +318,19 @@ public partial class BitTextField : BitTextInputBase
+ ///
+ /// Called by JavaScript when the ghost text is accepted.
+ ///
+ [JSInvokable("OnGhostTextAccepted")]
+ public async Task _NotifyGhostTextAccepted(string? acceptedText)
+ {
+ if (IsEnabled is false || ReadOnly) return;
+
+ await OnGhostTextAccepted.InvokeAsync(acceptedText);
+ }
+
+
+
public void ToggleRevealPassword()
{
_isPasswordRevealed = _isPasswordRevealed is false;
@@ -322,12 +357,16 @@ protected override void RegisterCssClasses()
ClassBuilder.Register(() => NoBorder ? "bit-tfl-nbd" : string.Empty);
+ ClassBuilder.Register(() => ReadOnly ? "bit-tfl-rdl" : string.Empty);
+
ClassBuilder.Register(() => _hasFocus ? $"bit-tfl-fcs {Classes?.Focused}" : string.Empty);
ClassBuilder.Register(() => Required && Label is null ? "bit-tfl-rnl" : string.Empty);
ClassBuilder.Register(() => FullWidth ? "bit-tfl-fwd" : string.Empty);
+ ClassBuilder.Register(() => PermanentGhost ? "bit-tfl-pgt" : string.Empty);
+
ClassBuilder.Register(() => Accent switch
{
BitColor.Primary => "bit-tfl-pri",
@@ -400,9 +439,20 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
{
await _js.BitTextFieldSetupMultilineInput(_Id, InputElement, AutoHeight, PreventEnter);
}
+
+ _dotnetObj = DotNetObjectReference.Create(this);
+ await _js.BitTextFieldSetupGhostText(_Id, InputElement, _dotnetObj);
+ _oldGhostText = GhostText;
+ await _js.BitTextFieldSetGhostText(_Id, GhostText ?? string.Empty);
}
else
{
+ if (GhostText != _oldGhostText)
+ {
+ _oldGhostText = GhostText;
+ await _js.BitTextFieldSetGhostText(_Id, GhostText ?? string.Empty);
+ }
+
if (Multiline && AutoHeight && _oldValue != Value)
{
_oldValue = Value;
@@ -509,13 +559,14 @@ private async Task HandleOnClearButtonClick()
await OnClear.InvokeAsync();
}
-
protected override async ValueTask DisposeAsync(bool disposing)
{
if (IsDisposed || disposing is false) return;
await base.DisposeAsync(disposing);
+ _dotnetObj?.Dispose();
+
try
{
await _js.BitTextFieldDispose(_Id);
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss
index abb8ff89cf..0075196c42 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss
@@ -63,7 +63,6 @@
}
&.bit-inv {
-
.bit-tfl-fgp,
.bit-tfl-wrp {
border-color: $clr-err;
@@ -87,17 +86,24 @@
width: 100%;
}
+.bit-tfl-pgt {
+ .bit-tfl-gho,
+ textarea.bit-tfl-inp {
+ scrollbar-gutter: stable;
+ }
+}
+
.bit-tfl-lbl {
margin: 0;
display: block;
box-shadow: none;
font-weight: 600;
+ color: $clr-fg-pri;
box-sizing: border-box;
font-size: spacing(1.75);
- line-height: spacing(2.5);
padding: spacing(0.625) 0;
+ line-height: spacing(2.5);
overflow-wrap: break-word;
- color: $clr-fg-pri;
}
.bit-tfl-fgp {
@@ -109,8 +115,8 @@
position: relative;
align-items: center;
flex-flow: row nowrap;
- min-height: spacing(4);
box-sizing: border-box;
+ min-height: spacing(4);
border-radius: $shp-border-radius;
background-color: var(--bit-tfl-clr-bg);
border: $shp-border-width $shp-border-style var(--bit-tfl-clr-brd);
@@ -126,13 +132,13 @@
font-weight: 400;
border-radius: 0;
box-shadow: none;
+ color: $clr-fg-pri;
padding: 0 spacing(1);
box-sizing: border-box;
text-overflow: ellipsis;
font-size: spacing(1.75);
min-height: spacing(3.75);
background: none transparent;
- color: $clr-fg-pri;
font-family: $tg-font-family;
&[type="password"]::-ms-reveal,
@@ -223,8 +229,8 @@
.bit-tfl-des {
span {
- font-size: spacing(1.25);
color: $clr-fg-pri;
+ font-size: spacing(1.25);
}
}
@@ -233,12 +239,12 @@
height: 100%;
display: flex;
flex-shrink: 0;
+ color: $clr-fg-pri;
align-items: center;
white-space: nowrap;
+ background: $clr-bg-sec;
padding: 0 spacing(1.25);
min-height: spacing(3.75);
- color: $clr-fg-pri;
- background: $clr-bg-sec;
span {
font-size: spacing(1.75);
@@ -252,6 +258,21 @@
height: auto;
align-items: stretch;
}
+
+ .bit-tfl-ghw {
+ flex-grow: 1;
+ }
+
+ .bit-tfl-gho {
+ display: block;
+ overflow: auto;
+ align-items: initial;
+ word-wrap: break-word;
+ white-space: pre-wrap;
+ overflow-wrap: break-word;
+ line-height: spacing(2.125);
+ padding: spacing(0.75) spacing(1);
+ }
}
.bit-tfl-mln {
@@ -348,10 +369,10 @@
.bit-tfl-rnl {
.bit-tfl-fgp::before {
content: "*";
+ color: $clr-req;
position: absolute;
top: spacing(-0.625);
right: spacing(-1.25);
- color: $clr-req;
}
}
@@ -361,6 +382,48 @@
}
}
+.bit-tfl-rdl {
+ .bit-tfl-fgp,
+ .bit-tfl-inp {
+ cursor: default;
+ }
+}
+
+.bit-tfl-ghw {
+ flex: 1 1 0;
+ min-width: 0;
+ display: flex;
+ position: relative;
+ align-items: stretch;
+
+ .bit-tfl-inp {
+ z-index: 1;
+ position: relative;
+ background: transparent;
+ }
+}
+
+.bit-tfl-gho {
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 0;
+ display: flex;
+ overflow: hidden;
+ font-weight: 400;
+ user-select: none;
+ position: absolute;
+ align-items: center;
+ pointer-events: none;
+ white-space: pre;
+ color: $clr-fg-ter;
+ padding: 0 spacing(1);
+ box-sizing: border-box;
+ font-size: spacing(1.75);
+ font-family: $tg-font-family;
+}
+
.bit-tfl-pri {
--bit-tfl-clr: #{$clr-pri};
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.ts b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.ts
index edd3a5487c..101c46d1b2 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.ts
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.ts
@@ -1,11 +1,13 @@
-namespace BitBlazorUI {
+namespace BitBlazorUI {
export class TextField {
private static _abortControllers: { [key: string]: AbortController } = {};
+ private static _ghostTexts: { [key: string]: string } = {};
+ private static _inputElements: { [key: string]: HTMLInputElement } = {};
public static setupMultilineInput(id: string, inputElement: HTMLInputElement, autoHeight: boolean, preventEnter: boolean) {
if (!inputElement) return;
- const ac = new AbortController();
+ const ac = TextField._abortControllers[id] ?? new AbortController();
TextField._abortControllers[id] = ac;
if (autoHeight) {
@@ -45,6 +47,145 @@
inputElement.style.height = inputElement.scrollHeight + 'px';
}
+ public static setupGhostText(id: string, inputElement: HTMLInputElement, dotnetObj: DotNetObject) {
+ if (!inputElement) return;
+
+ const ac = TextField._abortControllers[id] ?? new AbortController();
+ TextField._abortControllers[id] = ac;
+ TextField._inputElements[id] = inputElement;
+ const signal = ac.signal;
+
+ const getOverlay = () => inputElement.parentElement?.querySelector('.bit-tfl-gho') ?? null;
+ const hasGhost = () => (TextField._ghostTexts[id] ?? '').length > 0;
+ const getSelection = () => {
+ try {
+ const start = inputElement.selectionStart;
+ const end = inputElement.selectionEnd;
+
+ if (typeof start === 'number' && typeof end === 'number') {
+ return { start, end, supportsSelection: true };
+ }
+ } catch {
+ // Some input types (e.g. number) may throw when reading selection APIs.
+ }
+
+ const fallback = inputElement.value.length;
+ return { start: fallback, end: fallback, supportsSelection: false };
+ };
+
+ const syncScroll = () => {
+ const overlay = getOverlay();
+ if (!overlay) return;
+ overlay.scrollTop = inputElement.scrollTop;
+ overlay.scrollLeft = inputElement.scrollLeft;
+ };
+
+ // Accept the stored ghost text at the current caret position.
+ const acceptGhost = () => {
+ if (inputElement.readOnly || inputElement.disabled) return;
+
+ const ghost = TextField._ghostTexts[id] ?? '';
+ if (!ghost) return;
+
+ const { start, end, supportsSelection } = getSelection();
+
+ inputElement.value =
+ inputElement.value.substring(0, start) +
+ ghost +
+ inputElement.value.substring(end);
+
+ const newPos = start + ghost.length;
+ if (supportsSelection) {
+ try {
+ inputElement.setSelectionRange(newPos, newPos);
+ } catch {
+ // Ignore unsupported selection range operations.
+ }
+ }
+
+ // Clear ghost immediately after acceptance.
+ TextField._ghostTexts[id] = '';
+ const overlay = getOverlay();
+ if (overlay) overlay.textContent = inputElement.value;
+ syncScroll();
+
+ inputElement.dispatchEvent(new Event('input', { bubbles: true }));
+ dotnetObj.invokeMethodAsync('OnGhostTextAccepted', ghost);
+ };
+
+ // On every keystroke: immediately clear the ghost suggestion (index3.html pattern).
+ // The overlay is JS-owned; Blazor never touches its content.
+ inputElement.addEventListener('input', () => {
+ TextField._ghostTexts[id] = '';
+ const overlay = getOverlay();
+ if (overlay) overlay.textContent = inputElement.value;
+ syncScroll();
+ }, { signal });
+
+ // Tab/Enter: accept the ghost suggestion.
+ inputElement.addEventListener('keydown', e => {
+ const isAcceptKey = e.key === 'Tab' || e.key === 'Enter';
+
+ if (isAcceptKey && hasGhost()) {
+ if (inputElement.readOnly || inputElement.disabled) return;
+
+ const { start, end } = getSelection();
+ const atEnd = start === inputElement.value.length && end === start;
+ if (!atEnd) return;
+
+ e.preventDefault();
+ e.stopPropagation();
+ acceptGhost();
+ return;
+ }
+
+ if (!hasGhost()) return;
+
+ // Clear immediately on any other key press so stale ghost text never
+ // lingers until the later input event.
+ TextField._ghostTexts[id] = '';
+ const overlay = getOverlay();
+ if (overlay) overlay.textContent = inputElement.value;
+ }, { signal });
+
+ // Click/touch accept: when there is a ghost suggestion and the caret is at
+ // the end of the current value, treat click/touch as accepting the suggestion.
+ const acceptGhostOnPointer = () => {
+ if (inputElement.readOnly || inputElement.disabled) return;
+
+ if (!hasGhost()) return;
+
+ const { start, end } = getSelection();
+ const atEnd = start === inputElement.value.length && end === start;
+
+ if (!atEnd) return;
+
+ acceptGhost();
+ };
+
+ inputElement.addEventListener('click', acceptGhostOnPointer, { signal });
+ inputElement.addEventListener('touchend', acceptGhostOnPointer, { signal });
+
+ // Sync overlay scroll to input scroll (covers cursor navigation without input events).
+ inputElement.addEventListener('scroll', syncScroll, { signal });
+ }
+
+ // Called by C# (OnAfterRenderAsync) whenever the GhostText parameter changes.
+ // Stores the new ghost text and refreshes the overlay to show value + ghost.
+ public static setGhostText(id: string, ghostText: string) {
+ TextField._ghostTexts[id] = ghostText ?? '';
+
+ const inputElement = TextField._inputElements[id];
+ if (!inputElement) return;
+
+ const overlay = inputElement.parentElement?.querySelector('.bit-tfl-gho');
+ if (!overlay) return;
+
+ overlay.textContent = inputElement.value + (ghostText ?? '');
+ overlay.scrollTop = inputElement.scrollTop;
+ overlay.scrollLeft = inputElement.scrollLeft;
+ }
+
public static dispose(id: string) {
const ac = TextField._abortControllers[id];
if (!ac) return;
@@ -52,6 +193,8 @@
ac.abort();
delete TextField._abortControllers[id];
+ delete TextField._ghostTexts[id];
+ delete TextField._inputElements[id];
}
}
}
\ No newline at end of file
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextFieldClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextFieldClassStyles.cs
index 2ea2fc1897..87ec35525b 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextFieldClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextFieldClassStyles.cs
@@ -91,4 +91,14 @@ public class BitTextFieldClassStyles
/// Custom CSS classes/styles for the BitTextField's description.
///
public string? Description { get; set; }
+
+ ///
+ /// Custom CSS classes/styles for the BitTextField's ghost text wrapper element.
+ ///
+ public string? GhostTextWrapper { get; set; }
+
+ ///
+ /// Custom CSS classes/styles for the BitTextField's ghost text overlay container.
+ ///
+ public string? GhostTextOverlay { get; set; }
}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextFieldJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextFieldJsRuntimeExtensions.cs
index 1b8f3284ae..9ea033ded8 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextFieldJsRuntimeExtensions.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextFieldJsRuntimeExtensions.cs
@@ -12,6 +12,16 @@ internal static ValueTask BitTextFieldAdjustHeight(this IJSRuntime jsRuntime, El
return jsRuntime.InvokeVoid("BitBlazorUI.TextField.adjustHeight", input);
}
+ internal static ValueTask BitTextFieldSetupGhostText(this IJSRuntime jsRuntime, string id, ElementReference input, DotNetObjectReference dotnetObj)
+ {
+ return jsRuntime.InvokeVoid("BitBlazorUI.TextField.setupGhostText", id, input, dotnetObj);
+ }
+
+ internal static ValueTask BitTextFieldSetGhostText(this IJSRuntime jsRuntime, string id, string ghostText)
+ {
+ return jsRuntime.InvokeVoid("BitBlazorUI.TextField.setGhostText", id, ghostText);
+ }
+
internal static ValueTask BitTextFieldDispose(this IJSRuntime jsRuntime, string id)
{
return jsRuntime.InvokeVoid("BitBlazorUI.TextField.dispose", id);
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor
index 95d18d45ed..84cf83d219 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor
@@ -176,7 +176,59 @@
-
+
+
Demonstrates the ghost text (inline suggestion) feature. Set the GhostText parameter to show a faded inline suggestion after the cursor position. Press Tab, Enter, or click/touch to accept it and append it to the current value.
+
+
+
Basic (non-async)
+
+
Value: [@ghostBasicTextValue]
+
+
+
Value: [@ghostBasicMultilineValue]
+
+
Advanced (async + cancellation)
+
+
Value: [@ghostTextValue]
+
+
+
Value: [@ghostMultilineValue]
+
+
+
+
Demonstrates various binding scenarios with BitTextField, including one-way, two-way, on-change events, and immediate, debounce, and throttle options.
@@ -190,7 +242,7 @@
-
+
Demonstrates how validation can be applied to BitTextField, including required fields, numeric input, character constraints, email validation, and range validation.
@@ -227,7 +279,7 @@
-
+
Providing a range of color kinds for the background of the text field.
@@ -241,7 +293,7 @@
-
+
Providing a range of color kinds for the border of the text field.
@@ -255,7 +307,7 @@
-
+
Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.
@@ -297,7 +349,7 @@
-
+
Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the Icon parameter.
@@ -344,7 +396,7 @@
-
+
Explores styling and class customization for BitTextField, including component styles, custom classes, and detailed style options.
@@ -373,7 +425,7 @@
-
+
Use BitTextField in right-to-left (RTL).
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor.cs
index 48117c8749..6d9ca2909c 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor.cs
@@ -1,6 +1,6 @@
-namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.TextField;
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.TextField;
-public partial class BitTextFieldDemo
+public partial class BitTextFieldDemo : IDisposable
{
private readonly List componentParameters =
[
@@ -58,7 +58,7 @@ public partial class BitTextFieldDemo
Name = "ClearButtonIcon",
Type = "BitIconInfo?",
DefaultValue = "null",
- Description = "Gets or sets the icon to display on the clear button using custom CSS classes for external icon libraries. Takes precedence over ClearButtonIconName when both are set.",
+ Description = "The icon to display inside the clear button. Takes precedence over ClearButtonIconName when both are set.",
LinkType = LinkType.Link,
Href = "#bit-icon-info",
},
@@ -98,6 +98,13 @@ public partial class BitTextFieldDemo
Description = "Forces the text field fill 100% of its container width.",
},
new()
+ {
+ Name = "GhostText",
+ Type = "string?",
+ DefaultValue = "null",
+ Description = "The ghost/suggestion text displayed inline after the current cursor position. Update this value from outside (e.g. from an AI or autocomplete suggestion) to show a faded inline suggestion. The user can accept it by pressing Tab or Enter, or clicking/touching the ghost text.",
+ },
+ new()
{
Name = "HidePasswordIcon",
Type = "BitIconInfo?",
@@ -171,7 +178,7 @@ public partial class BitTextFieldDemo
Name = "NoBorder",
Type = "bool",
DefaultValue = "false",
- Description = "Whether or not the text field is borderless.",
+ Description = "Removes the border of the text input.",
},
new()
{
@@ -210,6 +217,12 @@ public partial class BitTextFieldDemo
Description = "Callback for when focus moves out of the input.",
},
new()
+ {
+ Name = "OnGhostTextAccepted",
+ Type = "EventCallback",
+ Description = "Callback invoked when the ghost text is accepted via Tab or Enter key, or click/touch. The accepted ghost text string is passed as the argument.",
+ },
+ new()
{
Name = "OnKeyDown",
Type = "EventCallback",
@@ -222,6 +235,13 @@ public partial class BitTextFieldDemo
Description = "Callback for When a keyboard key is released.",
},
new()
+ {
+ Name = "PermanentGhost",
+ Type = "bool",
+ DefaultValue = "false",
+ Description = "Enables permanent ghost mode that forces the scrollbar-gutter to always be present, preventing layout shift of the ghost text rendering.",
+ },
+ new()
{
Name = "Placeholder",
Type = "string?",
@@ -326,8 +346,8 @@ public partial class BitTextFieldDemo
new()
{
Name = "Type",
- Type = "BitInputType",
- DefaultValue = "BitInputType.Text",
+ Type = "BitInputType?",
+ DefaultValue = "null",
Description = "Input type.",
LinkType = LinkType.Link,
Href = "#input-type-enum"
@@ -475,6 +495,20 @@ public partial class BitTextFieldDemo
Type = "string?",
DefaultValue = "null",
Description = "Custom CSS classes/styles for the BitTextField's description."
+ },
+ new()
+ {
+ Name = "GhostTextWrapper",
+ Type = "string?",
+ DefaultValue = "null",
+ Description = "Custom CSS classes/styles for the BitTextField's ghost text wrapper element."
+ },
+ new()
+ {
+ Name = "GhostTextOverlay",
+ Type = "string?",
+ DefaultValue = "null",
+ Description = "Custom CSS classes/styles for the BitTextField's ghost text overlay container."
}
]
},
@@ -813,6 +847,117 @@ private void HandleInvalidSubmit()
+ private string? ghostBasicTextValue;
+ private string? ghostBasicSuggestion;
+
+ private string? ghostBasicMultilineValue;
+ private string? ghostBasicMultilineSuggestion;
+
+ private string? ghostTextValue;
+ private string? ghostSuggestion;
+
+ private string? ghostMultilineValue;
+ private string? ghostMultilineSuggestion;
+
+ private CancellationTokenSource? _ghostSuggestionCts;
+ private CancellationTokenSource? _ghostMultilineSuggestionCts;
+
+ private static readonly string[] _suggestions =
+ [
+ "application form",
+ "banana smoothie",
+ "car repair manual",
+ "dog training guide"
+ ];
+
+ private async Task SetGhostSuggestionAsync(string? value, bool isMultiline)
+ {
+ var cts = new CancellationTokenSource();
+
+ if (isMultiline)
+ {
+ CancelAndDispose(ref _ghostMultilineSuggestionCts);
+ _ghostMultilineSuggestionCts = cts;
+ ghostMultilineSuggestion = null;
+ }
+ else
+ {
+ CancelAndDispose(ref _ghostSuggestionCts);
+ _ghostSuggestionCts = cts;
+ ghostSuggestion = null;
+ }
+
+ try
+ {
+ var suggestion = await GetGhostSuggestionAsync(value, cts.Token);
+
+ if (cts.IsCancellationRequested) return;
+
+ if (isMultiline)
+ {
+ ghostMultilineSuggestion = suggestion;
+ }
+ else
+ {
+ ghostSuggestion = suggestion;
+ }
+ }
+ catch (OperationCanceledException)
+ {
+ // A newer request started and canceled this one.
+ }
+ }
+
+ private void ClearGhostSuggestion(bool isMultiline)
+ {
+ if (isMultiline)
+ {
+ CancelAndDispose(ref _ghostMultilineSuggestionCts);
+ ghostMultilineSuggestion = null;
+ }
+ else
+ {
+ CancelAndDispose(ref _ghostSuggestionCts);
+ ghostSuggestion = null;
+ }
+ }
+
+ private static void CancelAndDispose(ref CancellationTokenSource? cts)
+ {
+ cts?.Cancel();
+ cts?.Dispose();
+ cts = null;
+ }
+
+ private static string? GetGhostSuggestion(string? value)
+ {
+ if (string.IsNullOrEmpty(value)) return null;
+
+ if (char.IsWhiteSpace(value[^1])) return null;
+
+ var lastWord = value.Split((char[]?)null, StringSplitOptions.RemoveEmptyEntries).LastOrDefault();
+
+ if (string.IsNullOrEmpty(lastWord)) return null;
+
+ var match = _suggestions.FirstOrDefault(s => s.StartsWith(lastWord, StringComparison.OrdinalIgnoreCase));
+ return match?[lastWord.Length..];
+ }
+
+ private static async Task GetGhostSuggestionAsync(string? value, CancellationToken cancellationToken)
+ {
+ await Task.Delay(300, cancellationToken);
+
+ return GetGhostSuggestion(value);
+ }
+
+ public void Dispose()
+ {
+ CancelAndDispose(ref _ghostSuggestionCts);
+ CancelAndDispose(ref _ghostMultilineSuggestionCts);
+ }
+
+
+
private readonly string example1RazorCode = @"
@@ -912,16 +1057,164 @@ private void HandleInvalidSubmit()
private string? throttleValue;";
private readonly string example11RazorCode = @"
+ ghostBasicSuggestion = null)""
+ OnChange=""(v => ghostBasicSuggestion = GetGhostSuggestion(v))"" />
+