Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
plutonik-a opened this issue Sep 14, 2020 · 0 comments
Open

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

plutonik-a opened this issue Sep 14, 2020 · 0 comments
Labels
needs funding Issues falling out of scope for current budget. Contact us about cross-funding UI UI meets UX meets CSS design issues

Comments

@plutonik-a
Copy link
Contributor

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.
@tuurma tuurma added needs funding Issues falling out of scope for current budget. Contact us about cross-funding UI UI meets UX meets CSS design issues labels Sep 15, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs funding Issues falling out of scope for current budget. Contact us about cross-funding UI UI meets UX meets CSS design issues
Projects
None yet
Development

No branches or pull requests

2 participants