Issue with select using toggle and multiple in 0.15.12 (works in 0.15.10)

[Hawkeye64]

I am having an issue where using q-select with attributes toggle and multiple do not show the toggle in the dropdown in 0.15.12, but works in 0.15.10.

Here’s a fiddle with 0.15.10 showing it working. fiddle

Unfortunately, I cannot find a CDN with 0.15.12 (or 0.15.11) so can only reproduce it in local code (which hasn’t changed since 0.15.9) so something broke along the way.

Here’s the code:

  <q-field style="margin-top: 20px; margin-left: 20px;">
    <q-select
              v-model="selected"
              :options="options"
              color="teal-6"
              multiple
              toggle
              float-label="Cameras"
              />
  </q-field>

and the data:

  data: function () {
    return {
      selected: [],
      options: [
      	{ label: 'DCAM-8 - Thermal', value: 1 },
        { label: 'DCAM-8 - Color', value: 2 },
        { label: 'DTEST-2 - Thermal', value: 3 },
        { label: 'DTEST-2 - Color', value: 4 }
      ]
    }
  },

Again, in 0.15.10 this is working. In 0.15.12 the toggle never shows up in the dropdown.

I should mention, that in 0.15.12, that if you add the chips attribute, then it does work with the toggle, but I don’t want chips.

[Hawkeye64]

UPDATE This is actually working as expected. The toggles DO show. The control is on the right side of the page. There is an issue here, just not what I thought. When you are NOT using chips the text in the select, exceeds the width of the control and the dropdown that shows up is way off of the screen and therefore the toggles weren’t showing up.
Still trying to figure out why the width of the control is growing with multiple text in the select and the ellipse class on the control is not working as expected.

[Hawkeye64]

The fix is to add the max-width to the q-field:

  <q-field style="margin-top: 20px; margin-left: 20px; max-width: 100%;">