Blazor Server app: Why is input in an html table with embedded Input tags also showing in the next cell after hitting tab?

Question

Blazor Server app: Why is input in an html table with embedded Input tags also showing in the next cell after hitting tab?

Steve Rehling 145

I have a Blazor Server app built with Visual Studio Community 2022 v15.5.5. One component contains an html table with embedded input elements in each td cell, some showing user-entered data (via a value attribute and with CSS yellow highlighting) and others showing default values (via a placeholder attribute) where the user hasn't (yet) entered anything .

When I enter user data in a default cell that's followed by 2 more default cells in the same row, the entered value ends up formatted in the 1st cell (good) and appears unformatted in the 2nd cell (bad). Also, if I enter the data using the tab key, the cursor ends up in the 3rd cell, even though the onfocus events indicate the 2nd cell has focus. Finally, I've noticed since styling the cells with CSS that the surprise value in the 2nd cell is colored red. I'm not sure why that is.

I have put a demo app that shows the problem in Github (see here). The demo code is in the Counter page and the CSS is in site.css. There are Debug.Writeline statements that show what's happening with the underlying data that's rendered in the table. I'm guessing the problem is with the editing of the 2nd cell, but don't understand this enough to be sure. Samples of the user-data and default cell html appear below.

P.S. I am using the "value" versus "placeholder" approach instead of using "value" for both to get around the situation where the user enters a value that matches the default, in which case no OnChange event is triggered that will let me detect a user-entered value that happens to match the default, which I need to detect.

Any thoughts would be appreciated.

@if (bbdCell.CSSClass == enteredData)                         
{                         
<td class="@bbdCell.CSSClass" contenteditable="false" style="width: @colWidth">                             		   

<input style="width:@colWidth" class="@bbdCell.CSSClass"                                 value="@bbdCell.Value_Formatted" placeholder=""                                 
onFocus="this.select()"                                 
@onchange="@((ChangeEventArgs e) => OnChange(e, bbdCell.Value_Formatted, yearIndex, colIndex))"                                 @onfocusin="@((FocusEventArgs e) => OnFocusIn(e, yearIndex, colIndex))"                                 @onfocusout="@((FocusEventArgs e) => OnFocusOut(e, bbdCell.Value_Formatted, yearIndex, colIndex))" />                                             

</td>                         
}                     
else                         
{                         
<td class="@bbdCell.CSSClass" contenteditable="false" style="width: @colWidth">                             

<input style="width:@colWidth" class="@bbdCell.CSSClass"                                 
value = ""  placeholder="@bbdCell.Value_Formatted"                                 
onFocus="this.select()"                                 
@onchange="@((ChangeEventArgs e) => OnChange(e, bbdCell.Value_Formatted, yearIndex, colIndex))"                                 @onfocusin="@((FocusEventArgs e) => OnFocusIn(e, yearIndex, colIndex))"                                 @onfocusout="@((FocusEventArgs e) => OnFocusOut(e, bbdCell.Value_Formatted, yearIndex, colIndex))" />

</td>                         
}

Farid Uddin Kiron MSFT 456 Reputation points Microsoft External Staff

2023-07-05T09:45:37.37+00:00

Based on your code snippet and description it seems that you are loading css from external class. So the question is have your tried to set them inline in order to check if that behave accordingly?

Steve Rehling 145

Thanks for the question.

Off-hand, I'm not sure how css would affect the behavior of the demo, but I did what you suggested and embedded the limited styles directly in the TableDemo.razor file as shown in the revised html below. The problem remained.

I also then copied and explicitly added to the wwwroot/css folder the TableEditDemo.styles.css file that VS generated as part of the default Blazor server app and changed the _Layout.cshtml file to point the link at that file. Again, the problem remained.

@if (bbdCell.CSSClass == enteredData) 
{                            
<td contenteditable="false" style="width: 75px">
                                 
<input style="width:75px; background-color: yellow;"                                     value="@bbdCell.Value_Formatted"                                     
onFocus="this.select()"                                     
@onchange="@((ChangeEventArgs e) => OnChange(e, bbdCell.Value_Formatted, yearIndex, colIndex))"                                     @onfocusin="@((FocusEventArgs e) => OnFocusIn(e, yearIndex, colIndex))"                                     @onfocusout="@((FocusEventArgs e) => OnFocusOut(e, bbdCell.Value_Formatted, yearIndex, colIndex))" />                                                         

</td>                             
}                         
else                             
{                             
<td contenteditable="false" style="width: 75px">   
                              
<input style="width:75px; background-color: beige;"                                     placeholder="@bbdCell.Value_Formatted"                                     
onFocus="this.select()"                                     
@onchange="@((ChangeEventArgs e) => OnChange(e, bbdCell.Value_Formatted, yearIndex, colIndex))"                                     @onfocusin="@((FocusEventArgs e) => OnFocusIn(e, yearIndex, colIndex))"                                     @onfocusout="@((FocusEventArgs e) => OnFocusOut(e, bbdCell.Value_Formatted, yearIndex, colIndex))" /> 

</td>                             
}

Farid Uddin Kiron MSFT 456 Reputation points Microsoft External Staff

2023-07-06T09:02:55.56+00:00

Have checked while debugging if any other css overriding your inline design? You can inspect the details.
Steve Rehling 145 Reputation points

2023-07-06T13:14:36.48+00:00

I have been inspecting the rendered html. The screenshot below shows a row in which I entered a value (= 9) in the 3rd column (the one without a placeholder). The value 9 is showing in the 3rd column as expected, but is also showing in the demo in the 4th column (the one with placeholder = "$63"). Also, the cursor ended up in the 5th column after I hit tab when entering 9 in col 3. The html looks as I would expect, though not reflecting the 9 in column 4.

P.S. I've made the GitHub Repo public. Missed that it wasn't.

Your answer

Farid Uddin Kiron MSFT 456 Reputation points Microsoft External Staff

2023-07-05T09:45:37.37+00:00

Based on your code snippet and description it seems that you are loading css from external class. So the question is have your tried to set them inline in order to check if that behave accordingly?
Steve Rehling 145 Reputation points

2023-07-05T14:00:30.54+00:00

Thanks for the question.

Off-hand, I'm not sure how css would affect the behavior of the demo, but I did what you suggested and embedded the limited styles directly in the TableDemo.razor file as shown in the revised html below. The problem remained.

I also then copied and explicitly added to the wwwroot/css folder the TableEditDemo.styles.css file that VS generated as part of the default Blazor server app and changed the _Layout.cshtml file to point the link at that file. Again, the problem remained.

@if (bbdCell.CSSClass == enteredData) { <td contenteditable="false" style="width: 75px"> <input style="width:75px; background-color: yellow;" value="@bbdCell.Value_Formatted" onFocus="this.select()" @onchange="@((ChangeEventArgs e) => OnChange(e, bbdCell.Value_Formatted, yearIndex, colIndex))" @onfocusin="@((FocusEventArgs e) => OnFocusIn(e, yearIndex, colIndex))" @onfocusout="@((FocusEventArgs e) => OnFocusOut(e, bbdCell.Value_Formatted, yearIndex, colIndex))" /> </td> } else { <td contenteditable="false" style="width: 75px"> <input style="width:75px; background-color: beige;" placeholder="@bbdCell.Value_Formatted" onFocus="this.select()" @onchange="@((ChangeEventArgs e) => OnChange(e, bbdCell.Value_Formatted, yearIndex, colIndex))" @onfocusin="@((FocusEventArgs e) => OnFocusIn(e, yearIndex, colIndex))" @onfocusout="@((FocusEventArgs e) => OnFocusOut(e, bbdCell.Value_Formatted, yearIndex, colIndex))" /> </td> }
Farid Uddin Kiron MSFT 456 Reputation points Microsoft External Staff

2023-07-06T09:02:55.56+00:00

Have checked while debugging if any other css overriding your inline design? You can inspect the details.
Steve Rehling 145 Reputation points

2023-07-06T13:14:36.48+00:00

I have been inspecting the rendered html. The screenshot below shows a row in which I entered a value (= 9) in the 3rd column (the one without a placeholder). The value 9 is showing in the 3rd column as expected, but is also showing in the demo in the 4th column (the one with placeholder = "$63"). Also, the cursor ended up in the 5th column after I hit tab when entering 9 in col 3. The html looks as I would expect, though not reflecting the 9 in column 4.

P.S. I've made the GitHub Repo public. Missed that it wasn't.

Share via

Blazor Server app: Why is input in an html table with embedded Input tags also showing in the next cell after hitting tab?

Your answer