I'm fairly new to vuetify and vue in general. The problem I'm facing is that when I click on a datepicker, the calendar pops up and when I tab out, the cursor moves to the next input field but the calendar does not close.
I want it to close automatically on tab out.
I tried setting close-on-content-click="true" instead of false but to no avail. I'm not sure what else to try.
Here is a codepen I found vuetify documentation that has similar implementation and behavior as my application. codepen
Thank you for any inputs.
add this #keydown.tab='menu1 = false' in v-text-field
close-on-content-click is for mouse clicks and does not apply to keyboard actions. You need to explicitly toggle the v-menu model when the input loses focus.
To close the menu when whenever the input field loses focus I would attach the toggle to the blur event. You can do this by replacing the #blur listener to a method, in which you will set the menu model to false.
<v-text-field
v-model="dateFormatted"
label="Date"
hint="MM/DD/YYYY format"
persistent-hint
prepend-icon="mdi-calendar"
v-bind="attrs"
#blur="updateDate"
v-on="on"
/>
updateDate(event) {
// This is the same value as dateFormatted,
// you don't need to say this.dateFormatted like in your codepen.
const value = event.target.value;
this.date = this.parseDate(value);
this.menu1 = false;
}
"Destructuring" is JS good practice instead of randomly named variables or verbosity so I would write the first line as:
const { value } = event.target;
If you were passing additional variables into updateDate method you would need to write it as updateDate($event, variable) but if not, $event as first parameter is a given.
Related
I have a simple autocomplete menu just like the one below.
Is there any way to monitor if the user clicks outside the menu? By default, if the user clicks outside the menu, it will close the menu. But I would like to trigger other actions besides just closing the menu.
I will keep it simple with the following scenario:
I have a boolean variable called myBoolVar that has a default value of false.
When the autocomplete is mounted, it will autofocus the input and the menu will only open when the user starts typing in the input. Untill here the myBoolVar remains false. but only when the user clicks outside of the menu, then the menu closes and the myBoolVar changes to true.
I have been through vuetify api documentation without any luck so far.
<v-autocomplete
v-model="valuesActor"
:items="actorArray"
:search-input.sync="searchActor"
filled
autofocus
background-color=#313131
append-icon=""
prepend-inner-icon="mdi-arrow-left"
color="var(--textLightGrey)"
>
</v-autocomplete>
You can use blur event for autocomplete like that:
methods: {
someMethod() {
alert('tadam')
}
}
<v-autocomplete
v-model="value"
:items="items"
#blur="someMethod"
/>
You can find the documentation here https://vuetifyjs.com/en/api/v-autocomplete/#events
You can use the v-click-outside directive calls a function when something outside of the target element is clicked on.
for more info see the vuetify: v-click-outside docs.
You can use something like this
<v-autocomplete
v-click-outside="onClickOutside"
....
and on click outside you can call method
methods: {
onClickOutside () {
....
},
},
I have found the same question in this platform. Based on the accepted answer, I have built a form and made my button disabled.
<v-btn :disabled="!isFormValid">submit</v-btn>
data: () => ({
isFormValid: false,
})
But, Whenever, I filled an input, the submit button would activated though all other inputs are empty!
So, what is the actual way to keep the button disabled until all the inputs are not empty?
Codepen Demo
You should remove the lazy-validation property. As per the documentation,
If lazy-validation is enabled, value(A boolean value representing the validity of the
form.) will always be true unless there are visible validation
errors
I have a v-combobox component in my app. I have it to where I can type something in the input then #blur a check happens to see if the typed Item exists in the list or not. If it does not exist a modal opens up asking the user if they want to add it to the list.
I have it if the user clicks yes it is added to the list the problem I am having is if they click cancel and the dialog is closed focus should go back to the combobx input
When I try and set the focus I get the blue animation bar but no input cursor in the input of the combo box
I have set up a codesandbox example of my issue
CodeSandbox Example of Issue
I was wondering If i could get some help or pointers on why Im not getting the full focus to be able to type after clicking cancel on the dialog .
You can try to use $nextTick like this:
closeConfirmationDialog() {
// const comboBox = this.$refs[this.forInput];
// comboBox.$el.querySelector("input").focus();
this.showDialog = false;
this.cancelDialog = true;
this.$nextTick(() => {
this.$refs.categories.focus();
});
}
I have a popup in a leaflet map that can be closed by clicking on the 'x' in its upper right corner. How do I make the click event not propagate to the map itself?
I've tried using preventPropagate() in many places and forms, but none of them seem to work.
My latest code looks like that:
<div class="actions" #click="stopPropagation($event)">
(...)
stopPropagation(e) {
e.stopPropagation()
}
The above div (.actions) is the popup's main div.
I have also tried calling the function at a click in the popup's component tag in the parent component, but the result was the same, meaning clicking the 'x' closes the popup as expected but also results in a click event in the map that lies behind.
I use Vue and vue2-leaflet.
I appreciate any insight from you guys. Thanks!
UPDATE: actually, doesn't matter where in the popup the click happens, it always gets propagated to the map behind.
So, for reference, here's my solution:
<div class="actions" #click="someMethod($event)">
(...)
someMethod(e) {
(... some code)
return false
}
The command 'return false' is what solved my problem.
I tried using '#click.stop', but it gives me the '$event.stopPropagation() is not a function' error. The same happens if I run 'e.stopPropagation()' from inside the function.
The accepted answer didn't work for me so I wrapped my l-map in a div and applied the click.stop to that.
<div #click.stop.prevent.self="">
<l-map...>
</div>
It seems to me that the actual click event is parsed by the leaflet library rather than the Vue-compatible vue-2-leaflet, so the event that is received by the function doesn't have stopPropagation or preventDefault methods on the object. Thus, when Vue calls them with .stop or .prevent, the JS engine throws an error.
This is what I figured out for my issue dealing with event handling and stopping the propagation.
e.g.
someReference.on("click", (evt: L.LeafletEvent) => {
// You don't try to reference the event (evt) that is passed in
L.DomEvent.stopPropagation; // Just call this and it kills the propagation
// or you can call
// L.DomEvent.preventDefault(evt);
...
})
Could try an event modifier
Perhaps the stop modifier:
<div class="actions" #click.stop="closePopup">
I'm using Element UI's split-button which renders an extra button which is not in the template. However, I can get access to the button in question by setting ref="dropdown" on the dropdown holding this button, and referring to it with this.$refs.dropdown.$children, and finally loop over the $children array. Now, I want to set the HTML attribute disabled on this button but I can't seem to find a straightforward way to do this in the Vue docs.
How do I go about setting attributes on references?
You could use vm.$el to get the underlying Element, and then use Element.querySelector to select the dropdown's caret button. With the button reference, you could then use Element.setAttribute('disabled', '') to add the disabled attribute, and Element.removeAttribute('disabled') to remove it:
const btn = this.$refs.dropdown.$el.querySelector('.el-dropdown__caret-button');
if (enabled) {
btn.removeAttribute('disabled');
} else {
btn.setAttribute('disabled', '');
}
demo