Closed Bug 1461509 Opened 4 years ago Closed 3 years ago

Firefox allowing a read only date/time input field to be erased


(Core :: DOM: Core & HTML, defect, P2)

60 Branch



Tracking Status
firefox70 --- fixed


(Reporter: erchbox, Assigned: emilio)


(Blocks 1 open bug)


(Keywords: testcase)


(2 files)

User Agent: Mozilla/5.0 (Windows NT 10.0; rv:60.0) Gecko/20100101 Firefox/60.0
Build ID: 20180503143129

Steps to reproduce:

Add the following input element on a form:

<input type="date" name="AppDate" id="appdate" readonly required>

Actual results:

Firefox does not allow to type in the field but allows the content to be deleted. It also ignores the required attribute

Expected results:

I initialized the date field to the current date and was expecting the date would remain unchaged
(In reply to Eduardo Reyes from comment #0)
> <input type="date" name="AppDate" id="appdate" readonly required>

Is there more to it? That just shows a "mm / dd / yyyy" placeholder that can be selected but not erased with either Backspace or Delete.
Component: Untriaged → Layout: Form Controls
Product: Firefox → Core
I use the following function to pre-populate the field:

function SetAppDate() {
  var d = new Date();
  d = d.toISOString();
  document.getElementById("appdate").value = d.substr(0,10);

But the user can click in the date field and delete its content using Backspace. Even more, this is a form field and when the form is submitted, the posted value is null defeating both the readonly and require clauses
Component: Layout: Form Controls → General
Product: Core → Firefox
Attached file testcase 1
I'm putting this back in Core :: Layout: Form Controls. Please don't place bugs in General unless you're fairly certain no other component is more suitable.

The issue is reproducible with the attached testcase. Additionally,
* There's also a (x) button on the right side of the field to clear it, which does nothing when clicked. That should probably not be there at all.
* Prior to the regression, the date format matches my system settings. Afterwards, it's MM / DD / YYYY. That's bug 1421910.
Blocks: 1366188
Has Regression Range: --- → yes
Has STR: --- → yes
Component: General → Layout: Form Controls
Ever confirmed: true
Flags: needinfo?(mconley)
Flags: needinfo?(jessi3py)
Keywords: regression, testcase
Product: Firefox → Core
Oh, sorry! I am not familiar with your classification so did not know where to place it
Please don't forget that despite this entry field being marked as required it still goes through when the form is submitted. Is that the expected behavior?
Yep, this is a legitimate bug in the implementation.

Hey dholbert, out of curiosity, do you know who under Layout tends to take care of form controls these days? Or is this something that DOM folk tends to take care of?
Flags: needinfo?(mconley)
Flags: needinfo?(jessi3py)
Flags: needinfo?(dholbert)
jwatt is one layouty person who's done some recent-ish work in form-control-land.

Having said that, I'd bet the "readonly" invariant is enforced somewhere in DOM code, not in layout code.  (And the "Layout:Form Controls" component is about the rendering/sizing, not about code involved with interaction / field-editing so much.) So this probably belongs in a DOM component --> moving.

I have no idea how "readonly" is enforced in other form controls, but we probably need to copy some checks to the datetime implementation from other form controls.
Component: Layout: Form Controls → DOM: Core & HTML
Flags: needinfo?(dholbert)
Attachment #8975752 - Attachment description: date.html → testcase 1
Summary: Firefox allowing a read only date field to be erased → Firefox allowing a read only date/time input field to be erased
FWIW I don't think calling this a regression is exactly right since bug 1366188 just enabled datetime controls...  But we should try to fix this sooner than later now that we have enabled these controls.  -> P2.
Priority: -- → P2
Assignee: nobody → emilio
Pushed by
Don't allow clearing fields in date / time inputs when using backspace if disabled or readonly. r=smaug
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla70
Flags: in-testsuite+
Keywords: regression
You need to log in before you can comment on or make changes to this bug.