prevent tabbing on the icon when filling some input-fields in blazor

Question

I'm working on a project where you can insert your working hours, in which you have to insert start- & end times. But after you put in the start time and tab to go on, it does focus first on the icon, which comes from the

<input type="time">

I want that the tabbing only hits the input area, not the icon next to it.

This is the current state:

example input field:

                       <div class="text-section">

                            <label for="startTime"
                            class="text label without-margin">@((MarkupString)loc["StartTime"].ToString())</label>

                            <div class="property-container-three">
                                <div class="property-icon">
                                    <div class="icon solid start" tabIndex="-2">@Icons.Startzeit</div>
                                </div>

                                <input class="input-text nomargin centerInputContentVertical"
                               type="time"
                               id="startTime"
                               @ref="startTimeElement"
                               @bind-value="blazorStartTime"
                               @onblur="HandleStartTimeSet">
                            </div>
                        </div>

I already tried everything with tabindex:"-1", it just makes no difference. Also I'm just able to modify this icon due css, which goes like:

input[type="text"], input[type="date"], input[type="number"], input[type="search"], input[type="time"], input[type="datetime"], input[type="password"], [type="email"], select, textarea {
    padding: 8px 12px;
    height: 38px;
    width: 100%;
}

I do not have any more ideas or approaches...

I can't seem to replicate this when using just the HTML (copied twice to make 2 sets of inputs). Could it be the blazor code and focus.js code is not needed? `tabindex="-1"` should be sufficient without extra code I believe — Harrison, Oct 28 '22 at 08:21
@Harrison even without the focus.js, the tabindex="-1" does not work. — , Oct 28 '22 at 08:42
@Harrison I've found out that the icon comes from and not the icon that u see before the input element. It's like a clock; after the input, it hits there while tabbing. — , Oct 28 '22 at 09:36

score 0 · Accepted Answer · answered Oct 28 '22 at 10:38

After some googling I found, it is a known issue with Edge... see this answer, it states that Microsoft do not plan to fix it; but the link they mention is dead.

I can only replicate this bug on Edge. And it seems MS won't solve it...

You can target it with CSS: idea from here

input[type="time"]::-webkit-calendar-picker-indicator` {
  display: none:
}

Perhaps setting display: none will be enough and maybe adjusting padding/margin for it too?

Unfortunately, there is currently no stable CSS way to change the tab-index; and currently no way to change the HTML attributes.

The current CSS equivalent for tab-index is -moz-user-focus but this is non-standard and the documentation stresses that you "should not use this".
Similar things exist for grabbing the pseudo element with JavaScript like this question, but again this is for computedStyles which is back to the CSS issue again.

Maybe in future this sort of feature will be introduced and there will be a working answer for it....

prevent tabbing on the icon when filling some input-fields in blazor

1 Answers1