Duplicate clear icon in (date) input

[oliversalzburg]

Describe the bug

Under certain conditions, the sl-input will show two clear icons.

To Reproduce

Unclear so far.

Demo

https://codepen.io/oliversalzburg/pen/vYdMWOe?editors=1000

Screenshots

Browser / OS

• OS: WIndows
• Browser: Firefox
• Browser version: 101.0.1

[bunesk]

I can only reproduce this in Firefox. It seems to me that Firefox itself inserts this clear button because if you remove the clearable you still have one clear icon and it is directly within the input element. It also appears in a regular <input type="date">.

[oliversalzburg]

You're right. This only happens in Firefox. Not sure what I was thinking yesterday.

[oliversalzburg]

So for Webkit-based browsers, there's a -webkit-clear-button pseudo element. This pseudo element isn't supported in Firefox. There's a 4 year old issue on the subject and no alternative approach was provided there.

I've also seen this issue brought up in another component library, where they ended up implementing the entire picker themselves (not only because of this issue though).

Other common approaches seem like hacks that I wouldn't want to use for this this: https://stackoverflow.com/questions/49527186/how-to-remove-cross-on-date-and-time-html-inputs-in-firefox

Should Shoelace's clear button just always be hidden on Firefox then?

[bunesk]

Yeah I also didn't find something else to solve this. But in my opinion it is still better to use clip-path to solve this like this:

input[type='date'] {
  clip-path: inset(0 2em 0 0);
}

I think this would be better than hiding the shoelace clear button because the clear button of Firefox:

1. shows also up when clearable is not set
2. always has the same size, no matter which size you set to the sl-input
3. the position of the clear icon is also not that good

What are you thinking about this, @claviska? If you both agree I can write a PR for that.

[claviska]

This was a tough decision because there were zero browser sniffs in the library before 5f25049. After extensively researching ways around this, it appears as though @Buni48's clip-path solution is the most practical one. However, it causes adverse effects in other browsers, hence the sniff.

However, I'm OK with the user agent sniff (and prefer it over feature detection of unrelated properties since those are likely to change over time) because, if it fails, the clear icon will simply become redundant. This fix should work perfectly for 99.9% of users, and anyone changing their UA string will simply see an extra icon but they won't lose any functionality.

Until there's a better solution, e.g. a -moz pseudo element or a more reasonable workaround, this seems like the best path forward.