v-on:focus / @focus are not triggered on <polaris-text-field>

[kolbykskk]

The focus event is not being triggered on the polaris-text-field tag. I replaced that tag with just a simple input and it worked as expected. I also tried a change event on the polaris-text-field and it worked.

            <polaris-text-field 
                label="Text Color"
                type="text"
                v-on:focus="showPicker()">
            </polaris-text-field>

I've tried a bunch of things but that's what I have currently.

[lsapan]

Have you tried focus.native?

[farmerpaul]

I just tried focus.native just now, my code still doesn't trigger. I quickly Googled the focus event, and this came up:

The focus event fires when an element has received focus. The main difference between this event and focusin is that focusin bubbles while focus does not.

I guess in the polaris-text-field component's implementation, the focus event is being attached to an ancestor of the field, and as a result of the fact that focus doesn't bubble, it never gets triggered. (And I assume this just got missed in QA.)

So I found a workaround using focusin:

<polaris-text-field 
  label="Some label"
  type="text"
  @focusin.native="doSomething()">
</polaris-text-field>