vue-typeahead-bootstrap icon indicating copy to clipboard operation
vue-typeahead-bootstrap copied to clipboard

Scroll bar is not working when we use it in a modal popup

Open vishvanathaa opened this issue 3 years ago • 2 comments

When we used it inside modal popup, The auto complete list disappears when we try to scroll bar using mouse. scroll bar issue

vishvanathaa avatar Oct 22 '21 11:10 vishvanathaa

Same issue any luck finding a fix for this?

dustintenney avatar Dec 09 '21 16:12 dustintenney

Even though it is late, I am writing a workaround for the issue.

'onMouseDown' will check if cursor position is on scroll bar when 'mousedown' event is detected. If cursor position is on scroll bar, the modal popup will not be hidden by v-show with 'isFocused' variable.

Good luck with this!


data() { return { ... isClickedScrollbar: false, }; },

methods: { ... runFocusOut(tgt) { setTimeout(() => { if ((tgt && tgt.classList.contains('vbst-item'))) { return; } if (this.isClickedScrollbar === true) { this.isClickedScrollbar = false; return; } this.isFocused = false; }, 100); },

onMouseDown(e) {
  if (e.offsetX > e.target.clientWidth || e.offsetY > e.target.clientHeight) {
    this.isClickedScrollbar = true;
  } else {
    this.isClickedScrollbar = false;
  }
},

},

mounted() { ... window.addEventListener('mousedown', this.onMouseDown); }

sundlee avatar Dec 02 '22 00:12 sundlee