Issue with input before/after icons in firefox

[bobbyross]

I have discovered an issue with input fields when wrapped in columns having a width of 4 or less while using Firefox. If the column width is set to a size of 4 or greater after icons are clickable and the handler will fire, when less than 4 the cursor does not change to indicate the icon has an action and clicking does not fire the handler.

Below is a demonstration of what I am talking about…
I also have Fiddle here, though the handler never fires on the Fiddle no matter what which is something else because the same code works locally. In the fiddle you will notice that the small input after button does not react to hover or click actions within Firefox.

<div id="q-app">
  <div class="row">
    <div class="col-3">
      <q-input  float-label="Does not work in firefox" v-model="value" type="number" :after="[{icon: 'zoom_out_map', content: true, sayHello }]" />
    </div>
    <div class="col-8">
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <q-input  float-label="Works" v-model="value" type="number" :after="[{icon: 'zoom_out_map', content: true, sayHello }]" />
    </div>
  </div>
</div>

new Vue({
  el: '#q-app',
  data: function () {
    return {
      value: 12345
    }
  },
  
  methods: {
  	sayHello() {
    	alert('Hey there!!')
    }
	}
})

Thank you for any help…

[s.molinari]

Hi,

Thanks for reporting. If you could, please start an issue on Github. https://github.com/quasarframework/quasar/issues/new

The devs will have a look at it.

Scott