Blur event for custom vue component

Question

What I have
A custom DropDown with a filter text input above. The DropDown can be opened independently from the filter text input.

What I want
The intended behavior would be, that the dropdown closes when the filter input loses focus and also when I click with the mouse outside of the DropDown, so that the DropDown loses the focus.

What I tried

Bind to the blur event on my root div element in the control, which doesn't fire at all.
I also couldn't find anything about internal component methods which I could override.

Code

  <div @blur="onRootLostFocus">
    ...
  </div>

  ...
  ...
  ...

  onRootLostFocus() {
    console.log('LostFocus');
    this.deactivateSearchPanel();
    this.deactivateSelectionPanel();
  }

Solution

I missed, that a div needs tabindex="0" to be focusable, this fixed my problem

Could you provide some code example?

vchan
– vchan

2020-08-17 09:07:30 +00:00
Commented Aug 17, 2020 at 9:07 — vchan
– vchan, Commented Aug 17, 2020 at 9:07
@vchan Updated my question accordingly

TobiasW
– TobiasW

2020-08-17 09:15:28 +00:00
Commented Aug 17, 2020 at 9:15 — TobiasW
– TobiasW, Commented Aug 17, 2020 at 9:15

Ilijanovic · Accepted Answer · 2020-08-17 09:47:01Z

16

Something like this?

Answer: You need to set tabindex="0" to make it focusable.

Here an custom dropdown how you could do it:

Vue.component("dropdown", {
   props: ["value"],
   data(){
      return {
         open: false,
         options: ["BMW", "Fiat", "Citroen", "Audi", "Tesla"]
      }
   },
   methods: {
      toggleDropdown() {
         this.open = !this.open;
      },
      closeDropdown(){
         this.open = false;
      },
      selectOption(option) {
         this.$emit("input", option);
      }
   },
   template: `<div class="dropdown">
   <div @blur="closeDropdown" tabindex="0" ref="dropdown" @click="toggleDropdown" class="select">
   {{ value }}
   </div>
   <div class="options" :style="{'max-height': open ? '300px' : '0px'}">
      <div v-for="option in options" @mousedown="selectOption(option)" class="option">
         {{ option }}
      </div>
   </div>
</div>`
})

new Vue({
   el: "#app",
   data: {
      selectedCar: "BMW"
   }
})

.dropdown {
   width: 200px;
   position: relative;
}

.select {
   height: 40px;
   position: absolute;
   left: 0;
   width: 100%;
   background: green;
   display: flex;
   justify-content: center;
   align-items: center;
   color: white;
   cursor: pointer;
}
.option {
   width: 100%;
   height: 40px;
   background: darkgreen;
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
}
.option:hover {
   background: green;
}
.options {
   overflow: hidden;
   transition: max-height 200ms;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"> <p>
   {{ selectedCar }}</p>
   <dropdown v-model="selectedCar" />
  
</div>

edited Aug 17, 2020 at 9:47

answered Aug 17, 2020 at 9:25

Ilijanovic

15k4 gold badges29 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

The Fool Over a year ago

you dont have a component in there

Ilijanovic Over a year ago

@TheFool something like this? component with custom v-model on it

The Fool Over a year ago

I think, he wants to propagate blur so i don't see why v-model should be required. Look here what I tried regarding his question but it didn't work. I want to $emit blur and listen to that on the parent. codesandbox.io/s/purple-dew-v87py?file=/src/App.vue

TobiasW Over a year ago

This is what I want, but I don't see, why my blur event is not triggered on a div, while yours is getting fired.

Ilijanovic Over a year ago

@TheFool i see. divs need tabindex="0" to be focusable. i have said it in my answer aswell at the top

|

PiTheNumber · Accepted Answer · 2021-12-29 15:56:53Z

0

Note there is also tabindex="-1" to make it not reachable via sequential keyboard navigation.

Also consider using a <button> instead because of accessibility concerns.

See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

answered Dec 29, 2021 at 15:56

PiTheNumber

23.7k17 gold badges114 silver badges191 bronze badges

Collectives™ on Stack Overflow

Blur event for custom vue component

Solution

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Solution

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related