Placeholder doesn't appear until first click in input box

[rgamage]

The Placeholder assigned to the typeahead component doesn't seem to appear with the component is loaded/displayed, until the user clicks once inside the input box. It seems like part of the purpose of the placeholder is to show the user what we're expecting there, and possibly remove the need for a label to the side of the input box explaining that, so it would be nice if the placeholder appeared straight away.

[chrissainty]

As per the other issue you raised, could you clarify what you've done to see this behaviour? When running the sample app placeholders appear as expected.

[rgamage]

Here's the code I'm using...

@page "/examples/typeahead"
@using Schilling.ServiceHub.Models.PartRover
@using Blazor.Data

@inject PartService partService

<h4>Enter a Schilling Part Number</h4>
    <div class="row">
        <div class="col-12 col-sm-3">
            <BlazoredTypeahead SearchMethod="@SearchParts"
                               @bind-Value=selectedPart EnableDropDown="false" Placeholder="Part Number">
                <SelectedTemplate Context="part">
                    @part.Number
                </SelectedTemplate>
                <ResultTemplate Context="part">
                    @part.Number - @part.Description
                </ResultTemplate>
            </BlazoredTypeahead>
        </div>
        <div class="col-12 col-sm-1">
            <button class="btn btn-primary" type="submit">Submit</button>
        </div>
    </div>

@if (!string.IsNullOrEmpty(@selectedPart?.Number))
{
<h2 class="mt-3">
    @selectedPart.Number: @selectedPart?.Description
</h2>
}

@code {
    private PartSearchViewModel selectedPart = new PartSearchViewModel();

    private async Task<IEnumerable<PartSearchViewModel>> SearchParts(string searchText)
    {
        var parts = await partService.GetPartSuggestion(searchText);
        return parts;
    }
}

[chrissainty]

Try placeholder with a lowercase P

[rgamage]

Still behaving the same way, but interestingly, as I'm trying to wrap this inside a custom component, when I consume that custom component, the placeholder shows right away, and I can tab in and start typing. Unfortunately I've been struggling getting the notification delegate to fire on my consumer, but that's a different issue. Could it be because I removed the EditForm wrapper?

[chrissainty]

It shouldn't be, the control will work both with or without the EditForm component.

[pmccowat]

@rgamage Could you try not initialising selectedPart. We ran into the same issue with a child int property — changing to nullable fixed it. I have forked Chris' code and will try and find the problem

[rgamage]

Yes, I had confirmed in the other thread that this resolved the issue. If selectedPart is not initialized, all works well.

[chrissainty]

I'm going to close this issue as this is expected behaviour for the current functionality.