Search code examples
javascripthtmlasp.net-mvcdateunobtrusive-validation

html 5 date input: when date input is clicked with mouse it no longer gives indication that it has focus

This is an asp.net framework 4.8 mvc application using jquery unobtrusive validation. I'm using Chrome v90.0.4430.85 64-bit, but the same issue happens in the latest version of Edge.

Starting this morning, if you click on a date input using the mouse, the input does not give any visual clue that it has taken the focus. The numerals of the date input (yellow highlight) no longer appear to be editable; the cursor does not appear inside the input, and the numerals no longer highlight as a visual indicator that an edit is possible. By appearances, the only way to edit a date is to click the calendar icon. By appearances, there does not seem to be any way to clear the date.enter image description here

Here is the html that gets generated for this date input, and this is typical for all of the date inputs in our application, all of which now behave this same way.

<input class="text-box single-line ea-triggers-bound valid" 
data-val="true" 
data-val-date="The field Expiration Date must be a date." 
data-val-expirationdaterequired="When the line is escrowed Expiration Date is required." 
data-val-expirationdaterolled="You cannot roll expiration date forward equal to or greater than the 
policy term." 
id="Expiration_Date" 
name="Expiration_Date" 
type="date" 
value="2021-03-02" aria-describedby="Expiration_Date-error" aria-invalid="false">

If I revert back to Chrome v85 it works correctly: when I click on a date input I can see it take focus. This version of Chromium also still works correctly: https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Win_x64/843807/

I say "appearances" above because if I click on the numerals and then begin typing the input immediately responds correctly; I can edit the date numerals or delete them. But, if you use the mouse to click on a date input, there is no longer any visual indication that date input has focus.

This problem only happens when using the mouse to click on a date input. If I tab from input-to-input on the page the date input takes the focus correctly.

Solution

  • Thank you @Alexander_Langer, this is a chrome bug.

    https://bugs.chromium.org/p/chromium/issues/detail?id=1199352

    See this SO question: Chrome version 90 - input type time