Filters: Add type="search" to text filters

[melloware]

Description
As requested on the forums: https://forum.primefaces.org/viewtopic.php?f=3&t=69745

Adding type="search" to filters to allow modern browers to add the "x" to clear filter icons.

PrimeVue issue: primefaces/primevue#83

Describe the solution you would like
Simply adding type="search" to the generated input boxes for filter inputs

WORKAROUND

You can add this 1 line of Jquery code to your page to make all the filters have this...

$('input.ui-column-filter.ui-inputfield.ui-inputtext').attr('type', 'search');

[melloware]

Very happy with this new feature. Not sure if you want to mark it for 12.0 or not @tandraschko but is pretty clever and useful!

[tandraschko]

lets decide @mertsincan

[melloware]

From @mertsincan

Hi,
I think we can add showClearButton or showClear attribute to Column. So we can easily style it by themes.

showClear* : When enabled, a clear icon is displayed to clear the value.

https://www.primefaces.org/showcase/ui/input/inputText.xhtml?jfwid=d6123 (Right icon demo)

WDYT?

[melloware]

This can all be styled with CSS so we can easily theme it if we need to.

input[type="search"] {
  border: 1px solid gray;
  padding: .2em .4em;
  border-radius: .2em;
}

input[type="search"].dark {
  background: #222;
  color: #fff;
}

input[type="search"].light {
  background: #fff;
  color: #222;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  border-radius: 50em;
  background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
}

input[type="search"]:focus::-webkit-search-cancel-button {
  opacity: .3;
  pointer-events: all;
}

input[type="search"].dark::-webkit-search-cancel-button {
  filter: invert(1);
}