Set q-search clearable icon

[toymachiner62]

I’d like to set to change the icon that appears on q-select when clearable="true". I don’t see a configuration to do this. The only thing I can think of is to use :before and specify an icon and a function to basically perform the functionality of clearable="true".

Am i correct in that i’ll have to manually implement this or is there an easier way?

[s.molinari]

That is correct. You can use before or after to create your own clearing icon button. That is one of the ideas behind the before and after props.The clearable prop is just a simpler way to get a clearing function for use in those 80% of use cases that need it.

Scott

[toymachiner62]

Feature request to add an attribute for clearable icon!

[metalsadman]

the :before and :after can have icon property, just don’t set clearable in your q-search. https://quasar-framework.org/components/search.html

:after="[{
  // required icon
  icon: String,
  // required function to call when
  // icon is clicked/tapped
  handler: Function, // do your clear here

  // Optional. Show icon button
  // if model has a value
  content: Boolean,

  // Optional. Show icon button
  // if textfield is marked with error
  error: Boolean
}]"

[s.molinari]

@toymachiner62 said in Set q-search clearable icon:

Feature request to add an attribute for clearable icon!

And then an attribute to have it on the left and not the right. And then an attribute to get a different pull-down arrow showing, and then an attribute to get the pull-down arrow to show on the left…the list of ideas can go on and on. Point is, with the two slots (before and after) you can basically do anything you want. Instead of bloating up the select with more props, the two slots give you the opportunity to create your own select components with whatever additional buttons you want and you only need to create the component one time.

Scott

[toymachiner62]

Fair enough