Fuzziness occurrence in distinct vue element

Question

Fuzziness occurrence in distinct vue element

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

My Goal
I want the DropDown to close when the filter input loses focus and also when I click outside of the DropDown.

My Attempts

I tried binding to the blur event on my root div element in the control, but it didn't work.
I looked for internal component methods to override but couldn't find any.

Code Snippet

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

...
...
...

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

The Solution

I realized that a div needs tabindex="0" to be focusable, which solved my problem.

javascript typescript vue.js vue-component

Answer 1

Answer №1

Do something similar to this?

Solution: To ensure it is focusable, you should add tabindex="0".

Check out this customized dropdown example:

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>

Answer 2

Do something similar to this?

Solution: To ensure it is focusable, you should add tabindex="0".

Check out this customized dropdown example:

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>

Answer 3

Answer №2

It is important to note that adding tabindex="-1" will prevent the element from being accessed via keyboard navigation in sequence.

In order to ensure accessibility, it may be better to use a <button> instead of other elements.

To learn more about tabindex and its usage, you can visit https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

Answer 4

It is important to note that adding tabindex="-1" will prevent the element from being accessed via keyboard navigation in sequence.

In order to ensure accessibility, it may be better to use a <button> instead of other elements.

To learn more about tabindex and its usage, you can visit https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

Fuzziness occurrence in distinct vue element

The Solution

Answer №1

Answer №2

Similar questions

When a property is designated as readonly in a TypeScript class, it can still be modified despite its intended

Encountering [object, Object] while attempting to display JSON object retrieved from req.body in the console

Exploring alternative methods for accessing object values in TypeScript using a string object path without relying on the eval function

Angular JS - The controller function does not return after executing the service script

Utilizing custom form fields with JavaScript in Symfony2

Steps to delete vue-snotify notifications after unintentionally clicking the back button on the browser

Modify the website address and show the dynamic content using AJAX

What could be the reason for a "Delay" in the state update process within Redux?

Tips for assigning date ranges to arrays and then conducting comparisons with date input information

A technique to execute multiple Ajax calls simultaneously without having to wait for each one to finish in an onClick event

Utilizing Firefox and Selenium with Python: A guide to dynamically accessing HTML elements

Enhance your security with Ember-simple-auth when using ember-cli-simple-auth-token

How can I include additional lines in a 3D model?

Executing php class method through ajax with jQuery without requiring a php handler file

Steps for creating a file selection feature in Chonky.js

ReactJS Redux Provider fails to accept the store

Troubleshooting my HTML5 local storage issues for optimal functionality

Scroll to the bottom of a textarea in React by automatically shifting focus

Issue with Vue.js Checkbox functionality in Firefox, functioning smoothly in Chrome and IE

Using Partial function input in TypeScript