I'm building an app with VueJS + Vuetify and using "v-autocomplete" as a multi-selection dropdown. However, I can't find a way to prevent the dropdown drawer from opening when I click to remove an item.
Codepen example: https://codepen.io/rafacarneiro/pen/abOVEzw?editable=true&editors=101
Code used when removing an item:
<v-chip
v-bind="data.attrs"
:input-value="data.selected"
close
#click="data.select"
#click:close="remove(data.item)"
>
Current behaviour: when clicking on the "X" icon on a selected item, the item is removed, however, the dropdown drawer opens at the same time. I would like to prevent this behaviour when removing an item, but I've been struggling to find a way to do it.
Looks almost like a dup of: How to stop select from opening when closing chip in vuetify?
If you remove the filled prop from the v-autocomplete it will work.
#click.stop should make the job
Related
I have a form where I fill in textboxes through selenium (java). Some of the textboxes dynamically generate extra content when you click on them and remove the content when you focus on something else. This is a problem when I automate because if I am focused on a text box and try to click on something else, when the page removes the content it doesn't register my click and I need to click again. This leads to flakey behaviour since I need to now consider whether I need to click or double click a button depending on what element I was focused on before.
I can't send a tab key to the text box because sometimes it will tab into another textbox that has the same dynamic generation behaviour, leading to the same scenario as before.
I tried clicking the page element but it also doesn't seem to work. I also tried clicking the root div. It just doesn't seem to register my click (I also tried jsclicks)
What I would like to do is have a general way to unfocus a text box after I fill it.
Thanks!
Background:
My project uses the "Master Detail" project from Xamarin.Forms, so it comes equipped with the hamburger menu button in the top left which is supposed to be the main source of navigation throughout the app. However, my app requires the user to go through multiple of those screens without the use of the hamburger menu. But when a user uses my own buttons to change the detail, the hamburger menu still says the user is on the previous page.
For example, a user is on Page A. They click a button outside of the menu which sends them to Page B. The menu will still show Page A.
My Attempt:
I really didn't know where to start, so I tried taking the MenuItemType and passing it through the following function:
// This changes the screen without changing the menu and it works.
((MasterDetailPage)Application.Current.MainPage).Detail = new NavigationPage(new PageB());
// This was my attempt to change the menu.
(Application.Current.MainPage as MenuPage).RootPage.NavigateFromMenu((id)MenuItemType.PageB);
But that returned a Null Reference Exception when run.
I've also tried manually calling the list view associated with the hamburger menu and changing the selectedItem property, but that didn't work either. Is there any way to change the selected menu?
For Clarity:
Since StackOverflow won't let me post a video, here's a link to how the app acts. As you can see, I use the Menu to go to the "About" Page. I click a button on the screen which takes me back to the "Browse" Page. However, when I open the menu, it still says "About" is selected. I can't reselect "About" until the menu moves away, meaning I have to reopen "Browse" despite already being on that screen.
What I'm looking for is a function which will automatically change the selected menu item to "Browse" when I press that button on the "About" Page. The app is currently using a Master Detail Page which has the "Detail" component changing from the About Page to the Browse Page. The menu page is a Content Page which came built with the app beforehand.
I have a Pivot page which contains two PivotItems, both are ListViews. The ListViews are both ExitElementContainers. When you click on an item in the ListView you are navigated to the item's page. So far the ContinuumNavigation works fine. If you navigate back, the navigation still works (you can see how to element "exits"). But if you go to the other ListView and do the same, the "exit animation" does not work. Any idea what's wrong?
Transition traverses the Visual tree and only uses the first ExitElementContainer it finds. If you have multiple ListViews, you have to set it manually in the ItemClick handler.
Get the Transition from you page and use SetExitElementContainer.
I have a multiple tabs in a page and each tab (lets say Menu, Edit, Tools) has a couple of text field. Each field have Required Data Annotation. I have one Save Button to save all the fields from multiple tabs. Now my problem is when I am in Menu tab and without entering anything in the text box and click Save Button I got validation summary. If I move to other tab (Edit tab) without entering anything in the textbox in the File tab and I did the same thing in the Edit tab I got validation summary of the current tab (Edit tab) only but not the other one.
How can I get validation summary from all the tabs? OR
Can we validate while moving from one tab to other?
FYI, Each tab is <a href = "#tab-Menu">
Elements on your non-active tabs are most probably hidden. Bu default after version 1.9 jquery validation does not validate hidden elements (ignore: ":hidden"). You can see discussion here: https://github.com/jzaefferer/jquery-validation/issues/279
To enable validating even hidden elements, use this code:
// This will validate all tabs at once, not just current tab.
$.validator.setDefaults({
ignore: ""
});
More info on what you can specify is here http://jqueryvalidation.org/validate/
I'm building a mini WYSIWYG editor with a modal window (Twitter Bootstrap) for entering image paths. The workflow is like this:
User is editing something in the contenteditable div and wants to insert an image
User clicks the image button, the modal window opens
User enters some URL into the input field and hit the enter key
Now I'm trying to focus() back to the contenteditable div. Unfortunately it seems not to be focussed, because things like document.execCommand() don't work.
In other words:
How can I bring back the focus() to the contenteditable div after being in an input field?
I have seen a couple of solutions for that, some with big scripts doing some Range/Selection-stuff, but I'm sure there is a much simpler solution for this...
Anyone?