Vue: V-select dropdown keeps triggering keyboard to popup on iOS browser - vue.js

I am using v-select (Vuetify) as a dropdown component. When I click the dropdown to expand the option, it does but it also has a blinking cursor on the input line for the ability type and search the dropdown options if you don't want to scroll through them. The issue is that this is automatically triggering the iOS keyboard to come up and it's covering half the screen.
I tried passing the prop :disabled=true but this just prevents the dropdown from even expanding. Is there anyways to disable this without disabling the dropdown functionality?

Related

dojo dijit menubar submenu hover problems

I'm using dojo menubar and I want the submenus to pop-up onmouseover and disappear onmouseout.
Right now the hiding and showing behavior is based on a click.
Is there anyway to get it to hover on mouseover, stop hovering on mouseout?
I found that a javascript click() on the menu item will start the hover behavior, and another javascript click will end it, so I could add an onmouseover and onmouseout listener to each menubar item as a workaround, but maybe someone knows of an easier way to get the same behavior by changing some dijit settings?
The documentation says this but I'm not sure how to use it.
The Menu/MenuBar domNode has a dijitMenuPassive/dijitMenuActive class so that CSS rules for hover can be customized based on whether or not the menu has focus.
I tried to add class="dijitMenuActive" but didn't notice any changes.

How to make vuetify tooltip content cliquable?

I have vuetify tooltip tht contains a button.
The problem is that the tooltip disappears before I can click on the button.
How can I make the content of the tooltip cliquable.
you can use close-delay prop to make the tooltip stay open for a longer time but I assume that it's contents still won't be clickable because of some z-index issue.
for a clickable content on hover you can use v-menu like this:
menu on hover

Bootstrap native: override setFocus on dropdown handling

Aside from forking the library, is there a way to override/disable setFocus in the private show and hide methods of the dropdown?
I am using the dropdown for a mini-cart on a sticky navbar. When an item is added I'd like the dropdown to open (which works fine) but the focus is jumping to the top of the page on show and hide. I realize this is a feature and not a bug! But for this feature I want to keep any scrolling from occurring.
The only thing you can do is to is to hook into the shown.bs.dropdown and hidden.bs.dropdown events and set a different focus element after a 20ms timeout, but this is very confusing for users who use or only use keyboard navigation.

Issue with parallax/smooth-scolling and mouse wheel scrolling of Bootstrap modal popup windows

I am having issue with parallax/smooth-scolling and mouse wheel scrolling of Bootstrap modal popup windows.
The Bootstrap modal popup appears when user clicks "Learn More" button.
The modal popup window have the scrollbar. The issue is that user is not able to scroll using mouse wheel because that event is intercepted by parallax/smooth-scolling script.
I am not able to insert code here because the amount of code is too big.
The issue can be reproduced on this website.
Is it possible to solve this issue with adding custom javascript to the website?
I think the issue stems from adding parallax-3d to the body tag which is adding an onscroll event listener to your popups. I can see this from inspecting the events for the popup elements in developer tools.
I would suggest adding parallax-3d to main-container.
<div class="main-container parallax-3d">
Edit: Ok, so the parallax-3d library adds for all elements in the body, irrespective of placement.
I just removed the scroll events for the modals and it works.
Try this to remove scroll events.
$('.foundry_modal').unbind('scroll');

xulrunner tab close button

I have an xul window with a tab box. The tab and tappanel elements are generated as needed in Javascript.
I want the tabs to have a close button. The docs for the 'tabs' tag talks about a 'closebutton' attribute buts says it is no longer supported.
I am trying to create content inside the tab. Right now it contains two label tags. The first is the actual tab label and the second is a red X (actually unicode \u2716). It displays fine but I cannot seem to get an event to fire when the X is clicked.
I have tried using the onclick attribute and closebutton.addEventListener('click').
I also tried using a toolbarbutton instead of a label. It displays the X but does not draw the button around it when the mouse hovers. Most importantly I cannot get the button event to fire.