Skip to content

Commit

Permalink
feat(blazorui): add Autofocus to BitTextField component #5108 (#5111)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mhrastegari
mhrastegari authored Aug 20, 2023
1 parent 835b7ce commit e18e695
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 65 deletions.
4 changes: 3 additions & 1 deletion src/BlazorUI/Bit.BlazorUI/Components/TextField/BitTextField.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
@if (IsMultiline && Type == BitTextFieldType.Text)
{
<textarea @attributes="InputHtmlAttributes"
@ref="@_inputRef"
@onclick="@HandleOnClick"
@onkeyup="@HandleOnKeyUp"
@onfocus="@HandleOnFocus"
Expand All @@ -56,11 +57,12 @@
aria-labelledby="@(Label.HasValue() || LabelTemplate is not null ? _labelId : null)"
aria-describedby="@(Description.HasValue() || DescriptionTemplate is not null ? _descriptionId : null)">
@CurrentValue
</textarea>
</textarea>
}
else
{
<input id="@_textFieldId" @attributes="InputHtmlAttributes"
@ref="@_inputRef"
@onclick="@HandleOnClick"
@onfocus="@HandleOnFocus"
@onkeyup="@HandleOnKeyUp"
Expand Down
18 changes: 18 additions & 0 deletions src/BlazorUI/Bit.BlazorUI/Components/TextField/BitTextField.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ public partial class BitTextField
private BitTextFieldType type = BitTextFieldType.Text;
private string focusClass = string.Empty;

private ElementReference _inputRef = default!;
private string _textFieldId = string.Empty;
private string _inputType = string.Empty;
private string _labelId = string.Empty;
Expand All @@ -37,6 +38,11 @@ private string _focusClass
/// </summary>
[Parameter] public string? AutoComplete { get; set; }

/// <summary>
/// Determines if the text field is auto focused on first render.
/// </summary>
[Parameter] public bool AutoFocus { get; set; }

/// <summary>
/// Whether to show the reveal password button for input type 'password'.
/// </summary>
Expand Down Expand Up @@ -362,6 +368,18 @@ protected override Task OnInitializedAsync()
return base.OnInitializedAsync();
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
await base.OnAfterRenderAsync(firstRender);

if (firstRender is false || IsEnabled is false) return;

if (AutoFocus)
{
await _inputRef.FocusAsync();
}
}



private void SetElementType()
Expand Down
73 changes: 56 additions & 17 deletions src/BlazorUI/Demo/Client/Core/Pages/Components/TextField/BitTextFieldDemo.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,15 @@
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="IsUnderlined" HTMLSourceCode="@example2HTMLCode" ExampleId="example2">
<ComponentExampleBox Title="AutoFocus" HTMLSourceCode="@example2HTMLCode" ExampleId="example2">
<ExamplePreview>
<div class="example-box">
<BitTextField Placeholder="Enter a text..." AutoFocus="true" Label="Auto focused" />
</div>
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="IsUnderlined" HTMLSourceCode="@example3HTMLCode" ExampleId="example3">
<ExamplePreview>
<div class="example-box">
<BitTextField Placeholder="Enter a text..." Label="Basic" IsUnderlined="true" />
Expand All @@ -37,7 +45,7 @@
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="HasBorder" HTMLSourceCode="@example3HTMLCode" ExampleId="example3">
<ComponentExampleBox Title="HasBorder" HTMLSourceCode="@example4HTMLCode" ExampleId="example4">
<ExamplePreview>
<div class="example-box">
<BitTextField Placeholder="Enter a text..." Label="Basic No Border" HasBorder="false" />
Expand All @@ -49,7 +57,7 @@
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="IsMultiline" HTMLSourceCode="@example4HTMLCode" ExampleId="example4">
<ComponentExampleBox Title="IsMultiline" HTMLSourceCode="@example5HTMLCode" ExampleId="example5">
<ExamplePreview>
<div class="example-box">
<BitTextField Placeholder="Enter a text..." Label="Resizable (By default)" IsMultiline="true" />
Expand All @@ -61,7 +69,7 @@
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Icon" HTMLSourceCode="@example5HTMLCode" ExampleId="example5">
<ComponentExampleBox Title="Icon" HTMLSourceCode="@example6HTMLCode" ExampleId="example6">
<ExamplePreview>
<div class="example-box">
<BitTextField Placeholder="Enter an email..." Label="Email Icon" IconName="@BitIconName.EditMail" />
Expand All @@ -71,7 +79,7 @@
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Prefix & Suffix" HTMLSourceCode="@example6HTMLCode" ExampleId="example6">
<ComponentExampleBox Title="Prefix & Suffix" HTMLSourceCode="@example7HTMLCode" ExampleId="example7">
<ExamplePreview>
<div class="example-box">
<BitTextField Label="With Prefix" Prefix="https://" />
Expand All @@ -85,37 +93,37 @@
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Templates" HTMLSourceCode="@example7HTMLCode" ExampleId="example7">
<ComponentExampleBox Title="Templates" HTMLSourceCode="@example8HTMLCode" ExampleId="example8">
<ExamplePreview>
<div class="example-box">
<BitTextField Placeholder="Enter a text...">
<LabelTemplate>
<label style="color: coral;">This is custom Label</label>
<BitLabel Style="color: coral;">This is custom Label</BitLabel>
</LabelTemplate>
</BitTextField>
<br />
<BitTextField Placeholder="Enter a text..." Label="This is custom Description">
<DescriptionTemplate>
<span style="color: coral;">Description</span>
<BitLabel Style="color: coral;">Description</BitLabel>
</DescriptionTemplate>
</BitTextField>
<br />
<BitTextField Placeholder="Enter a text..." Label="This is custom Prefix">
<PrefixTemplate>
<span style="color: coral; margin: 0 5px;">Prefix</span>
<BitLabel Style="color: coral; margin: 0 5px;">Prefix</BitLabel>
</PrefixTemplate>
</BitTextField>
<br />
<BitTextField Placeholder="Enter a text..." Label="This is custom Suffix">
<SuffixTemplate>
<span style="color: coral; margin: 0 5px;">Suffix</span>
<BitLabel Style="color: coral; margin: 0 5px;">Suffix</BitLabel>
</SuffixTemplate>
</BitTextField>
</div>
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Password types" HTMLSourceCode="@example8HTMLCode" ExampleId="example8">
<ComponentExampleBox Title="Password types" HTMLSourceCode="@example9HTMLCode" ExampleId="example9">
<ExamplePreview>
<div class="example-box">
<BitTextField Placeholder="Enter a password..." Label="Password" Type="BitTextFieldType.Password" />
Expand All @@ -125,7 +133,7 @@
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Controlled" HTMLSourceCode="@example9HTMLCode" CSharpSourceCode="@example9CSharpCode" ExampleId="example9">
<ComponentExampleBox Title="Controlled" HTMLSourceCode="@example10HTMLCode" CSharpSourceCode="@example10CSharpCode" ExampleId="example10">
<ExamplePreview>
<div class="example-box">
<div>
Expand All @@ -140,7 +148,7 @@
<br />
<div>
<BitTextField Placeholder="Enter a text..." Label="OnChange" OnChange="(v) => OnChangeValue = v" />
<span>Value: @OnChangeValue</span>
<BitLabel>Value: @OnChangeValue</BitLabel>
</div>
<br />
<div>
Expand All @@ -150,7 +158,7 @@
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="IsTrimmed" HTMLSourceCode="@example10HTMLCode" CSharpSourceCode="@example10CSharpCode" ExampleId="example10">
<ComponentExampleBox Title="IsTrimmed" HTMLSourceCode="@example11HTMLCode" CSharpSourceCode="@example11CSharpCode" ExampleId="example11">
<ExamplePreview>
<div class="example-desc">The trim property removes whitespaces from both sides of a string.</div>
<div class="example-box">
Expand All @@ -167,7 +175,7 @@
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Style & Class" HTMLSourceCode="@example11HTMLCode" ExampleId="example11">
<ComponentExampleBox Title="Style & Class" HTMLSourceCode="@example12HTMLCode" ExampleId="example12">
<ExamplePreview>
<div class="custom-wrapper">
<BitTextField Placeholder="Enter a text..." Label="Custom LabelStyle" LabelStyle="color:green" />
Expand All @@ -183,7 +191,7 @@
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Validation" HTMLSourceCode="@example12HTMLCode" CSharpSourceCode="@example12CSharpCode" ExampleId="example12">
<ComponentExampleBox Title="Validation" HTMLSourceCode="@example13HTMLCode" CSharpSourceCode="@example13CSharpCode" ExampleId="example13">
<ExamplePreview>
<div class="example-box">
@if (formIsValidSubmit is false)
Expand Down Expand Up @@ -233,4 +241,35 @@
</div>
</ExamplePreview>
</ComponentExampleBox>
</ComponentDemo>
</ComponentDemo>

@code {
private string OneWayValue;
private string TwoWayValue;
private string OnChangeValue;
private string ReadOnlyValue = "this is readonly value";

private string TrimmedValue;
private string NotTrimmedValue;

private ValidationTextFieldModel validationTextFieldModel = new();
public bool formIsValidSubmit;

private async Task HandleValidSubmit()
{
formIsValidSubmit = true;

await Task.Delay(2000);

validationTextFieldModel = new();

formIsValidSubmit = false;

StateHasChanged();
}

private void HandleInvalidSubmit()
{
formIsValidSubmit = false;
}
}
Loading

0 comments on commit e18e695

Please sign in to comment.