search

eeditiones / tei-publisher-components

Web components used by TEI Publisher and apps generated by it
https://cdn.tei-publisher.com/
GNU General Public License v3.0
18 stars 14 forks source link

Components providing "autocomplete" need a reset/cancel button #45

Open plutonik-a opened 4 years ago

plutonik-a commented 4 years ago

Currently we are using @cwmr/paper-autocomplete library for autocomplete input elements (e.g. search input).

Screenshot 2020-09-14 at 20 32 37

These inputs provide a reset/cancel icon by default, which seems convenient, but there are two disadvantages:

  1. The pseudo button -webkit-search-cancel-button is only supported by webkit browsers. So e.g. Firefox will not display any reset option at all.
    See the full list here: https://caniuse.com/?search=-webkit-search-cancel-button

    "This feature is non-standard and should not be used without careful consideration. "

  2. Where the browser supports the cancel button, it has a browser's default styling which is not customizable. In Chrome you will see a blue reset button (which is in my case placed on a blue background, therefore invisible!).
  3. The icons appear on hover, and as the "caniuse" table shows, most of the mobile browsers don't support it.

I'd rather have optional, cross-browser supported buttons next to the input, ideally one for submit and one for resetting the input. These should come in two options:

  1. Native buttons for later customization.
  2. Paper elements for a ready-styled integration.