Textfield with type="date" shows extra calendar icon in Firefox

[Timbuktu1982]

What is affected?

Component

Description

Hi there,

when i used a textfield with type="date" it working correctly in firefox, but not working correctly in chrome or edge. I miss the date-picker from browser...

Can you help me?

Reproduction

Use a simple is working in firefox, but not in chrome or edge (date-picker from browser is missing).

Workaround

no content

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

2.3.0

Browser/OS/Node environment

Chrome: 134.0.6998.117 (not working)
Edge 112.0.1722.48 (not working)
Firefox: 137.0.1 (working)
OS: Ubuntu 24.10
Node: 22.12.0
NPM: 10.9.0

[asyncliz]

It appears to be working for me in Chrome: https://jsbin.com/rowowusafu/edit?html,output

Can you provide more info on what isn't working? You can show the picker by focusing the field and pressing the space key.

You can also add an icon button that calls showPicker() when it's clicked.

// This method was just recently added, it's not published yet
// textfield.showPicker(); 
// You can use the shadow root in the meantime
textfield.shadowRoot.querySelector('input').showPicker();

[Timbuktu1982]

Hi Liz,

unfortunately your example does not work either.

I have also published this problem in a fork repo (material-esm/material#35 (comment)).
Treeder has a good approach, but unfortunately the solution given doesn't work for me either.
I have changed the Chrome display settings to the light theme, but the date picker is still not there.

Have you another idea?

[asyncliz]

Are you referring to the browser's <input> calendar icon that is intentionally removed?

The datepicker itself still works, but in MWC the non-Material browser <input> icons are removed in favor of using Material icon buttons. Here's a demo: https://output.jsbin.com/wayuwolabu

[Timbuktu1982]

Hi Liz,

unfortunately your example does not work properly (I see an unspecified error in the console).

But I have a fundamental problem with this solution. In Firefox I see two icons (the original datepicker icon and the trailing icon - I had already thought of this solution a few days ago, but discarded it due to this circumstance).

Is there a way to deactivate the date picker in general and only display the trailing icon?

[HarmfulBreeze]

Date picker not opening in JS Bin might be due to this (it's about <select> but it also applies to <input>, at least on Edge).

About the calendar picker indicator on Firefox, you might want to follow bug #1812397 and the related bugs mentioned at the end of the thread :)

[asyncliz]

Date picker not opening in JS Bin might be due to this

Yes, that's why I linked to the output.jsbin.com, but outputs are only available for a short amount of time before it reverts to the edit page. You can copy/paste the same code into a new jsbin, open the external output page, and then it'll work like it normally does.

About the calendar picker indicator on Firefox, you might want to follow bug #1812397 and the related bugs mentioned at the end of the thread :)

Thanks for the links! Let's repurpose this issue to track hiding Firefox's new <input type="date"> icon once there's a CSS selector to style it.

[Timbuktu1982]

Hi,

thank you for your replies.

I have not found a general solution for Firefox, but it gives a possibility to make the icon transparent. The solution is compatible with most browsers (https://caniuse.com/mdn-css_properties_-webkit-text-fill-color).

input { -webkit-text-fill-color: black; color: transparent; }

Now i have the problem, how i can set this style for the input elements inside the shadow of md-outlined-text-field. Have you an idea?

The only thing that surprises me is the fact that the repo of https://github.com/treeder/material has no problem with this issue. There the date-picker also works in chrome.

[Timbuktu1982]

@asyncliz The new title irritates me a little. I continue to have the basic problem with the missing default calendar picker icon in Chrome and Edge (latest versions).

[HarmfulBreeze]

@asyncLiz The new title irritates me a little. I continue to have the basic problem with the missing default calendar picker icon in Chrome and Edge (latest versions).

I believe this is what Liz said was intentionally removed:

Are you referring to the browser's calendar icon that is intentionally removed?

[Timbuktu1982]

Ah ok, now i understand.

But why was this removed intentionally?

[asyncliz]

The browser calendar icons are removed because they don't match the Material Design spec.

In Material, the text field's icon should be interactive, show a ripple and focus ring, and match the new updated icon symbols. The browser input icons are intentionally removed so they don't clash with Material icons that are intended to be the replacement.

If this doesn't work for you, you can always create use the "field" building block component to create a text field that doesn't remove built-in browser calendar icons.

[Timbuktu1982]

Hi Liz,
sorry, i didn't ask my question correctly.
Why the icon is only removed in chrome by default and not in firefox?

[asyncliz]

Why the icon is only removed in chrome by default and not in firefox?

That is what I re-purposed this bug for. There should not be a calendar icon in Firefox. Once the Firefox bug for an icon pseudo selector is implemented, we can add that selector to the text field's styles to remove the icon from both Chrome and Firefox:

material-web/textfield/internal/_input.scss

Lines 30 to 33 in 5bc1506

	// Remove built-in datepicker icon on Chrome
	&::-webkit-calendar-picker-indicator {
	display: none;
	}